1. M Dixon 1 04 – Data Types & Debugging

2. Questions: Expressions a)What is the result of: 7 + Int(8.245) b)Write an expression to: put a random number into txtRand 15 txtRand.value = Rnd()

3. Question: Pseudo-code Write VBScript code that does the following: when btnDown is clicked read txtNum subtract 1 put in txtRes Sub btnDown_onClick() End Sub txtNum.value - 1 txtRes.value =

4. M Dixon 4 Session Aims & Objectives Aims –to introduce the idea of types of data –introduce you to the interactive debugger Objectives, after this week’s sessions, you should be able to: –recognise different types of data numeric string (text) –correct errors relating to data types –Use Debugger to locate and fix errors

5. Example: AddNum v1 Add Numbers Sub btnAdd_OnClick() parResult.innerText = txtNum1.value + txtNum2.value End Sub Doesn't work!

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

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

8. String Functions CInt("63") convert to integer result is 63 Left("boo",2) left stringresult is "bo" Right("hello",3) right stringresult is "llo" Mid("hello",2,3) middle stringresult is "ell" Len("S Smith") lengthresult is 7 Space(5) spacesresult is " "

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

10. String Expressions

11. Questions: String Expressions a)What is the result of: Mid("what is the time?", 3, 4) b)What is the result of: Left("bob", 2) & Right("sal", 1) c)Write an expression to: convert "16" to a number d)Write an expression to: give the first two letters of "Mr John Smith" "at i" "bol" CInt("16") Left("Mr John Smith", 2)

12. String Expressions same pattern as numeric expressions: "What is " & txtN1.value & " times " data operator data operator

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

14. Example: AddNum v2 Add Numbers Sub btnAdd_OnClick() parResult.innerText = CInt (txtNum1.value) + CInt (txtNum2.value) End Sub

15. M Dixon 15 Error Types –syntax: computer unable to understand your instructions (program does not execute), e.g. –run-time: program can't execute instruction and exits (future lecture) –logical: program executes but does not match specification (do what was intended), e.g. 3 error types :

16. M Dixon 16 Errors: Syntax Code cannot be understood missing ( syntax error Browsers often ignore code with errors

17. M Dixon 17 Errors: Run time Code cannot be executed Computer –just symbol matching –No intelligence missing e run time error

18. M Dixon 18 Errors: Logical Code does not do what you wanted blue instead of red

19. M Dixon 19 Questions: Errors Spot the errors (you should find 6), and decide whether they are syntax or logical Hello Sub btnBlue_OnCluck() document.bgColor = "Red" End Sub Sub btnRed_Onlick() document.bgColor "Red" End Sub Sub window_OnClick() document.bgColour = "White" End Sib

20. M Dixon 20 Debugging key skill: –locate the cause of a bug using testing methods first step –narrow it down as much as possible typical pattern in early tutorials: –student: it doesn't work –lecturer: what doesn't work –student: my code –lecturer: yes, but which bit exactly –student: ???? –lecturer: run your program, take me through it, which bits work, and where exactly does it go wrong –student: when I click this, nothing happens –lecturer: which bit of code is responsible for doing that? –student: this bit

21. M Dixon 21 Debugging Process What happens when run? –Nothing? –Errors (syntax, or run-time)? –Does the wrong thing (logical error)?

22. M Dixon 22 Debugging Process murder investigation –who-done-it? doctor treating patient –diagnosis –treatment scientific: –observation –experimentation (systematic)

23. Example: Drinks SPECIFICATION User Requirements –Students wish to decide which supermarket sells drinks at the best price Software Requirements –Functional: –user enters offer details (bottle size, number of bottles, and price) –computer calculates bottle price and price per pint –Non-functional should be easy to use

24. Example: Drinks What happens when run? –Nothing? –think of murder investigation who-done-it? –input boxes, button, and text displays therefore: html works! –button does not respond therefore: prime suspect is button code

25. Example: Drinks (with ERRORS) Bottle Size: ml Quantity: Price (£): £ per bottle £ per pint Sub Calc_onClick() lblBottlePrice.innerText = txtQty.valu / txtPrice.value lblPintPrice.innerText = lblBottlePrice.innerText * (568 / txtBottleSize.value) End Sub

26. Breakpoints Examine code line by line –can help, but time consuming Breakpoint (press F9 on keyboard):

27. Breakpoints Breakpoint: like DVD pause, when line hit Logic: –if breakpoint hit, code will pause, therefore event handler is OK, must be code –if nothing happens, breakpoint not hit, therefore event handler not working (this is what happens – check name)

28. Example: Drinks (with ERRORS) Bottle Size: ml Quantity: Price (£): £ per bottle £ per pint Sub Calc_onClick() lblBottlePrice.innerText = txtQty.valu / txtPrice.value lblPintPrice.innerText = lblBottlePrice.innerText * (568 / txtBottleSize.value) End Sub

29. Debugging: Breakpoint hit After event-handler fixed –breakpoint hit, code paused

30. Debugging Can run 1 line – press F8 on keyboard Always click Break (this means pause) Always read message

31. Debugging – Stop Button Click Stop button, to edit code

32. Debugging: Check output Is this right? –if each bottle is 0.8, then 0.8 * quantity should be same as price –0.8 * 4 = 3.2 –this is wrong –therefore: bottle price must be wrong

33. Debugging: Immediate Window Use ? to ask ‘what is in txtQty.value’ F8 run single line

34. Remarks Comments – ignored by computer: ' VB uses an apostrophe for comments. Sub btnClear_onClick() txtNum1.Value = 0 ' put 0 into txtNum1 End Sub useful for: –learning (you can explain your code) –giving additional information (professional) –disable line (rather than delete it)

35. Example: Ball Character (design) WHEN Right button Clicked move ball character right WHEN Left button Clicked move ball character left WHEN Up button Clicked move ball character up WHEN Down button Clicked move ball character down

36. Absolute Positioning change properties – change position picBall.style.posTop picBall.style.posLeftpicBall.width picBall.height document.body.clientWidth

37. Example: Ball Character (script) Ball Character Sub window_onLoad () picBall.style.posLeft = 200 picBall.style.posTop = 100 End Sub Sub btnRight_onClick () picBall.style.posLeft = picBall.style.posLeft + 10 End Sub

38. Substitution Programming = different to maths = Right hand side Reads (source) Left hand side Writes (destination)

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

40. Tutorial Exercises: Drinks LEARNING OBJECTIVE: use interactive debugger to identify and correct errors Task 1: Create a new project, and type in the code for the drinks example. Running it should display the html, but the calc button does nothing. Task 2: Use the interactive debugger to identify and correct the errors in the code.

41. Tutorial Exercise: Ball Char LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages TASK 1: Get the Right and Down buttons from the Ball Character example working. (code provided, images in resources area on server). TASK 2: Get the Left and Up buttons working. (You will need to work out what code to use. Use the code provided as inspiration) TASK 3: Make the Ball Character blink when the user moves the mouse over it. (add code that changes the picture – like the Puppy example) TASK 4: Add a button to move the Ball Character diagonally. (You will need two lines of code in the same event handler)