05 – Problem Solving & Data Types

05 – Problem Solving & Data Types

Question: Pseudo-code • Write VBScript code that does the following: when btnDown is clicked read txtNum subtract 1 put in txtNum function btnDown_onClick(){ txtNum.value = txtNum.value – 1; }

Can't touch this • Student work from last week: based on work done by Daniel Thornton & David Orrock

Questions • name: event, object, property, eventhandler, operator, function, expression <script language="javascript"> function window_onLoad(){ imgHammer.style.posLeft = 500; imgHammer.style.posTop = 100; imgHammer.style.height = 100; imgHammer.style.width = 75; sndPlayer.URL = "Hammer.wav"; } function imgHammer_onMouseOver(){ imgHammer.style.posLeft = Math.random() * (document.body.clientWidth - imgHammer.width); imgHammer.style.posTop = Math.random() * (document.body.clientHeight - imgHammer.height); } </script>

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

Example: AddNum v1 <html> <head><title>Add Numbers</title></head> <body> <input type="text" id="txtNum1" /><br /> <input type="text" id="txtNum2" /><br /> <input type="button" id="btnAdd" value="Add" onclick="btnAdd_onClick()" /> <p id="lblResult"></p> </body> </html> <script language="javascript"> function btnAdd_onClick(){ lblResult.innerText = txtNum1.value + txtNum2.value; } </script> Doesn't work!

Types of Information • Numeric (numbers) 29 (integer/whole) 56.23 (real/decimal) • String (text) "Hello there!" "BOO" • Pictures (numbers) • Sound (numbers)

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

String Functions parseInt("63") convert to integer result is 63String("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").length result is 7

String Expressions

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

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

Example: AddNum v2 <html> <head><title>Add Numbers</title></head> <body> <input id="txtNum1" type="text" /><br /> <input id="txtNum2" type="text" /><br /> <input id="btnAdd" type="button" value="Add" onclick="btnAdd_onClick()"/> <p id="lblResult"></p> </body> </html> <script language="javascript"> function btnAdd_onClick(){ lblResult.innerText = parseInt(txtNum1.value) + parseInt(txtNum2.value) } </script>

Types of problem • two types of problem: • Known problems:successfully dealt with before,can remember the solution • Unknown problems:never seen before,have to discover / invent a solution for ourselves

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

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

Example: Movement • Goal state • Start state • Operations • Move Up • Move Down • Move Left • Move Right • Solution: • Move Up • Move Up • Move Up • Move Right • Move Right • Move Right • Move Up • Move Right • Move Up • Move Right • Move Up • Move Right or

Important steps • essential to understand the problem (start state, goal state, and operations) prior to finding a solution • essential to break a problem downinto smaller sub-problems,i.e. identify intermediate sub-goal states • difficult in solving problem often due to these

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

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)

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 100the object is 50 widewhere is its mid point? • It is often difficult for them to describe the general (abstract) process they use

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

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

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)

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

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

Example: Swap v1 • put txtB into txtA • put txtA into txtB <html> <head><title>Swap</title></head> <body> <input id="txtA" type="text" value="Bob" /> <input id="txtB" type="text" value="Sally" /> <input id="btnSwap" type="button" value="Swap" onclick="btnSwap_onClick()" /> </body> </html> <script language="javascript"> function btnSwap_onClick(){ txtA.value = txtB.value; txtB.value = txtA.value; } </script> • does not work!

Example: Swap v1 (why?)

Example: Swap v2 <html> <head><title>Swap</title></head> <body> <input id="txtA" type="text" value="Bob" /> <input id="txtB" type="text" value="Sally" /> <input id="btnSwap" type="button" value="Swap" onclick="btnSwap_onClick()" /> <input id="txtTemp" type="text" disabled="disabled" /> </body> </html> <script language="javascript"> function btnSwap_onClick(){ txtTemp.value = txtA.value; txtA.value = txtB.value; txtB.value = txtTemp.value; } </script> • put txtA into temp • put txtB into txtA • put temp into txtB • works!

Example: Swap v2 (Why?)

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

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

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 Process Output • £15000 15000-15000*0.09 = £0 • £16000 16000-15000*0.09 = £90

Generating Assignment Code • put "Hello" into txtAtxtA.value = "Hello" • get txtA and join it with txtB, and put the result in parResparRes.innerText = txtA.value + txtB.value • put into txtNum2, the result of multiplying txtNum1 by 2txtNum2.innerText = txtNum1.value * 2

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

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

Example: Text Shift <html> <head><title>Text Shift</title></head> <body onload="window_onLoad()"> <p id="parH"></p> </body> </html> <script language="javascript"> 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); } </script>

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

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

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

Tutorial Exercises: Text Shift • LEARNING OBJECTIVE:develop and implement an algorithm to solve a problemuse 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.

05 – Problem Solving & Data Types