05 Problem Solving Data Types Mark Dixon Page
05 – Problem Solving & Data Types Mark Dixon Page 1
Question: Pseudo-code • Write VBScript code that does the following: when btn. Down is clicked read txt. Num subtract 1 put in txt. Num Sub btn. Down_on. Click() txt. Num. value = txt. Num. value - 1 End Sub Mark Dixon Page 2
Can't touch this • Student work from last week: based on work done by Daniel Thornton & David Orrock Mark Dixon Page 3
Questions • name: event, object, property, event handler, operator, function, expression <script language="vbscript"> Sub window_on. Load() img. Hammer. style. pos. Left = 500 img. Hammer. style. pos. Top = 100 img. Hammer. style. height = 100 img. Hammer. style. width = 75 snd. Player. URL = "Hammer. wav" End Sub img. Hammer_on. Mouse. Over() img. Hammer. style. pos. Left = Rnd() * (document. body. client. Width - img. Hammer. width) img. Hammer. style. pos. Top = Rnd() * (document. body. client. Height - img. Hammer. height End Sub </script> Mark Dixon Page 4
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 5
Example: Add. Num v 1 <html> <head><title>Add Numbers</title></head> <body> <input type="text" id="txt. Num 1" /> <input type="text" id="txt. Num 2" /> <input type="button" id="btn. Add" value="Add" /> <p id="lbl. Result"></p> </body> </html> Doesn't work! Mark Dixon <script language="vbscript"> Sub btn. Add_On. Click() lbl. Result. inner. Text = txt. Num 1. value + txt. Num 2 End Sub </script> Page 6
Types of Information • Numeric (numbers) 29 56. 23 • String (text) "Hello there!" "BOO" (integer/whole) (real/decimal) • Pictures (numbers) • Sound (numbers) Mark Dixon Page 7
Add. Num problem • The + operator works with: – numbers, and – text 23 + 16 "23" + "16" 39 "2316" double quotes enclose text • Text input boxes store text: txt. Num 1. value + txt. Num 2. value • We need to convert text to numbers Mark Dixon Page 8
String Functions CInt("63") convert to integer result is 63 Left("boo", 2) left string result is "bo" Right("hello", 3) right string result is "llo" Mid("hello", 2, 3) middle string result is "ell" Len("S Smith") length result is 7 Space(5) result is " Mark Dixon spaces " Page 9
String Expressions Mark Dixon Page 10
String Expressions & Errors "What is " & txt. N 1. value & " times " data operator "What is twice " txt. N 1. value & "? " ERROR! missing operator "What is 6 minus " & & txt. N 1. value & "? " ERROR! missing data "This is a number & txt. N 1. value Mark Dixon Page 11
Questions: String Expressions a) What is the result of: Mid("what is the time? ", 3, 4) "at i" b) What is the result of: Left("bob", 2) & Right("sal", 1) "bol" c) Write an expression to: convert "16" to a number CInt("16") d) Write an expression to: give the first two letters of "Mr John Smith" Left("Mr John Smith", 2) Mark Dixon Page 12
Example: Add. Num v 2 <html> <head><title>Add Numbers</title></head> <body> <input id="txt. Num 1" type="text" /> <input id="txt. Num 2" type="text" /> <input id="btn. Add" type="button" value="Add" /> <p id="lbl. Result"></p> </body> </html> <script language="vbscript"> Sub btn. Add_On. Click() lbl. Result. inner. Text = CInt(txt. Num 1. value) + CInt(txt. Num 2 End Sub </script> Mark Dixon Page 13
Nested functions • nested functions (one inside another): Right(Left("Hello there", 5), 2) • do what is in the brackets first Right(Left("Hello there", 5), 2) = Right( = Mark Dixon "Hello" , 2) "lo" Page 14
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 15
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 16
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 17
Example: Movement • Goal state • Start state • Operations – Move Up – Move Down – Move Left – Move Right • Solution: Mark Dixon 1. 2. 3. 4. 5. 6. Move Up or Move Up Move Right 1. 2. 3. 4. 5. 6. Move Up Move Right Page 18
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 19
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 20
Example: Horizontal mid point • Start state: an image on the screen • Goal state: to calculate its horizontal mid point • Set of operations: – – pos. Left: gives the position of its left edge pos. Top: 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 pos. Left value 2. add half the Width Mark Dixon Page 21
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: – Len(s): gives the number of characters in s – Right(s, n): gives n characters from the right of s – Left(s, n): gives n characters from the left of s – Mid(s, p, n): gives n characters from s, starting at position p • Solution: 1. Left(text, 1) Mark Dixon Page 22
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 23
Concrete vs. Abstract code • we have: – pos. Left – pos. Top • right = left + width • middle = left + (width / 2) • concrete code (works for window 800 px wide): pic. Ball. style. pos. Left = 400 • vs. abstract code (works for all window widths): pic. Ball. style. pos. Left = document. body. client. Width / 2 Mark Dixon Page 24
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 – – Mark Dixon procedural / algorithmic: fixed sequence do exactly what they are told cannot deal with errors no imagination or creativity Page 25
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 26
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 27
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 28
Example: Swap v 1 • does not work! • put txt. B into txt. A • put txt. A into txt. B Mark Dixon <html> <head><title>Swap</title></head> <body> <input id="txt. A" type="text" value="Bob" /> <input id="txt. B" type="text" value="Sally" /> <input id="btn. Swap" type="button" value="Sw </body> </html> <script language="vbscript"> Sub btn. Swap_on. Click() txt. A. value = txt. B. value = txt. A. value End Sub </script> Page 29
Example: Swap v 1 (why? ) Mark Dixon Page 30
Example: Swap v 2 • works! • put txt. A into temp • put txt. B into txt. A • put temp into txt. B Mark Dixon <html> <head><title>Swap</title></head> <body> <input id="txt. A" type="text" value="Bob" /> <input id="txt. B" type="text" value="Sally" /> <input id="btn. Swap" type="button" value="Swa <input id="txt. Temp" type="text" disabled="disa </body> </html> <script language="vbscript"> Sub btn. Swap_on. Click() txt. Temp. value = txt. A. value = txt. B. value = txt. Temp. value End Sub </script> Page 31
Example: Swap v 2 (Why? ) Mark Dixon Page 32
The Empty String • Two double quotes (no space between) "" • Used to clear contents: txt. Num. value = "" Mark Dixon Page 33
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 34
Example: Student Loan (Design) • When Calculate button is clicked: – – read annual salary text box deduct £ 15000 calculate 9% put result in paragraph • Test Data: Input – £ 15000 – £ 16000 Mark Dixon Process 15000 -15000*0. 09 = 16000 -15000*0. 09 = Output £ 0 £ 90 Page 35
Generating Assignment Code • put "Hello" into txt. A. value = "Hello" • get txt. A and join it with txt. B, and put the result in par. Res. inner. Text = txt. A. value + txt. B. value • put into txt. Num 2, the result of multiplying txt. Num 1 by 2 txt. Num 2. inner. Text = txt. Num 1. value * 2 Mark Dixon Page 36
Questions: Assignment • What is the code for: – put 0 into the pos. Left property of pic. House. style. pos. Left = 0 – increase the pos. Top property of pic. House by 5 pic. House. style. pos. Top = pic. House. style. pos. Top + 5 – decrease the pos. Top property of pic. Car by 9 pic. Car. style. pos. Top = pic. Car. style. pos. Top - 9 Mark Dixon Page 37
Errors • txt. Temp. value = "" + 5 type mismatch (cannot add "" to 5) • txt. Temp. value = "7" + 5 OK – VB converts "7" into 7 automatically • txt. Temp. value = 7 + 5 OK – 7 plus 5 is 12 • value. txt. Temp = 7 + 5 object required 'value' (object comes first) Mark Dixon Page 38
Example: Text Shift <html> <head><title>Text Shift</title></head> <body> <p id="par. H"></p> </body> </html> <script language="vbscript"> Sub window_on. Load() par. H. inner. Text = "Hello There" & Space(100) window. set. Interval "Text. Shift()", 50 End Sub Text. Shift() par. H. inner. Text = Mid(par. H. inner. Text, 2) & Left(par. H. inner. Text, 1) End Sub </script> Mark Dixon Page 39
Tutorial Exercises: Add. Num • LEARNING OBJECTIVE: use a function to convert string (text) to integer (number) data • Task 1: get the addnum examples (v 1 and v 2) working Mark Dixon Page 40
Tutorial Exercises: Swap • LEARNING OBJECTIVE: use an algorithm to solve a problem • Task 1: get the swap examples (v 1 and v 2) working • Task 2: change v 2 of the swap page so that the temporary text box is hidden Mark Dixon Page 41
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 42
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. Mark Dixon Page 43
- Slides: 43
