03 Conditional Execution Mark Dixon 1 Admin Test
- Slides: 48
03 – Conditional Execution Mark Dixon 1
Admin: Test (next week) • In class test – teaching week 4 • 1 h 30 minutes • short answer (5 - 6 words) • 20% of overall mark (40% of Test component) Mark Dixon 2
Admin: On-line Quiz M Dixon Mark Dixon 3 3
Coursework 1: Plagiarism • Cannot share code • Cannot share writing • Copying code = 0% = fail • Supplying code (giving to others) = 0% • Detection Very Likely Mark Dixon 4
Coursework 1: Plagiarism • Self-plagiarism – you may only submit a piece of work for one assessment • Getting others to do work for you: – You can be asked at any time to explain your work – If you cannot explain your work, you may be found guilty of plagiarism • Lecture material: – can be used freely (and adapted) for assignments Mark Dixon 5
Coursework 1: Plagiarism • Automated Software: Mark Dixon 6
Questions: Data Types a) What is the result of: String("George Boole"). sub. Str(4, 4) ge B b) What is put in par. Res? txt. Pet. Name. value = "George" par. Res. inner. Text = String(txt. Pet. Name. value). slice(3, 6) rge c) What is put in par. Res? txt. Pet. Name. value = "George" par. Res. inner. Text = String("txt. Pet. Name"). sub. Str(0, 3) txt Mark Dixon 7
Questions: Assignments a) Write a line of code that: 1. reads from txt. Num 2. adds 9 3. writes the result into par. Res. inner. Text = txt. Num. value + 9; Mark Dixon 8
Questions: Assignments a) Write a line of code that: 1. reads txt. Op 2. divides by 10 3. puts the result into txt. Nt. value = txt. Op. value / 10; Mark Dixon 9
Session Aims & Objectives • Aims – to introduce the main concepts involved in getting the computer to act differently under different circumstances • Objectives, by end of this week’s sessions, you should be able to: – evaluate and generate conditional expressions – use conditional statements (If) to make your code more adaptable Mark Dixon 10
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 Mark Dixon 11
Absolute Positioning pic. Ball. style. pos. Top pic. Ball. style. pos. Left pic. Ball. height pic. Ball. width document. body. client. Width • change properties – change position Mark Dixon 12
Example: Ball Character (script) <html> <head><title>Ball Character</title></head> <body bgcolor="#00 ff 00" onload="window_On. Load()"> <input type="button" id="btn. Right" value="Right" onclick="btn. Right_On. Click()" /> <input type="button" id="btn. Down" value="Down" onclick="btn. Down_On. Click()" /> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolu </body> </html> <script language="javascript"> function window_On. Load(){ pic. Ball. style. posl. Left = 200; pic. Ball. style. pos. Top = 100; } function btn. Right_On. Click(){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 10; } Mark Dixon function btn. Down_On. Click(){ pic. Ball. style. pos. Top = pic. Ball. style. pos. Top + 10; } </script> 13
Example: Sound <html> <head> <title>Sound</title> </head> <body> <bgsound id="snd. Player"></bgsound> <input id="btn. Fart" type="button" value="Fart" onclick="btn. Fart_on. Clic </body> </html> <script language="javascript"> function btn. Fart_on. Click(){ snd. Player. src = "Fart. wav"; } </script> Mark Dixon 14
Substitution • Programming = different to maths = • Right hand side Reads (source) • Left hand side Writes (destination) Mark Dixon 15
Adaptive Behaviour • So far – every statement always executed in sequence • Often necessary for software to – change behaviour under different circumstances Mark Dixon 16
Example: Student Loan <html> <head><title>Student Loan Repayment Calculator</title></head> <body> <center><font size="+2"><b>Student Loan Repayment Calculator</b></font></center> <input id="txt. Income" type="text" /> <input id="btn. Calc" type="button" value="Calculate" onclick="btn. Calc_on. Click()" /> <p id="par. Payment"></p> </body> </html> <script language="javascript"> function btn. Calc_on. Click(){ par. Payment. inner. Text = (txt. Income. value - 21000) * 0. 09; } </script> Problem: if salary < 21000 gives negative payment Mark Dixon 17
Example: Multiplication Test SPECIFICATION • User Requirements – A primary school teacher wants to test the multiplication skills of her children. • Software Requirements – Functional: – display a multiplication question – allow the user to type a response – check the response and provide feedback – Non-functional should be interesting, colourful, and easy to use Mark Dixon 18
Example: Multiplication Test v 1 <html> <head><title>Multiply</title></head> <body> <p>What is 5 times 3? </p> <input id="txt. Ans" type="text" /> <input id="btn. Ans" type="button" value="Check" onclick="btn. Ans_on. Click()" /> <p id="par. Comment"></p> </body> </html> <script language="javascript"> function btn. Ans_on. Click(){ if (txt. Ans. value == 15){ document. bg. Color = "yellow"; par. Comment. inner. Text = "Correct, well done!"; }else{ document. bg. Color = "cyan"; par. Comment. inner. Text = "Sorry, try again"; } } </script> Mark Dixon 19
Example: Multiplication Test v 1 Mark Dixon 20
Example: Multiplication Test v 1 Mark Dixon 21
if statements • Use the following syntax (pattern): if (condition){ statementblock } • For example: if (txt. Age. value < 18){ document. bg. Color = "Red"; } Mark Dixon 22
if else statements • Use the following syntax (pattern): if (condition){ statementblock-1 }else{ statementblock-2 } • For example: if (txt. Age. value < 18){ document. bg. Color = "Red"; }else{ document. bg. Color = "Blue"; } Mark Dixon 23
George Boole • 1815 (Lincoln, UK) – 1864 • Invented Boolean algebra – key concept in computing – boolean datatype: • false • true (stored as 0) (stored as 1 or -1) • Condition – Boolean expression, evaluates to true or false Mark Dixon 24
Conditions: Relational Operators • conditions contain relational operators: == is equal to > < >= <= != Mark Dixon is greater than is less than is greater than or equal to is less than or equal to is not equal to 25
Conditions: Examples (literal) • Using literals: 34 == 34 Mark Dixon true 34 == 12 false 34 > 4 true 18 <= 18 true "hello" > "zoo" false 26
Conditions: Examples (symbolic) • Using symbols (controls' properties): Assume that: pic. Main. style. pos. Left is 2300 pic. Main. style. pos. Left == 2300 true pic. Main. style. pos. Left == 2309 false pic. Main. style. pos. Left != 189 true pic. Main. style. pos. Left > 1900 true Mark Dixon 27
Conditions: Errors • Are the following valid: – 23 > 30 – 66 15 – 23 < missing (relational) operator missing data – pic. Bat. style. pos. Left > 1000 – < pic. Bat. style. pos. Top missing data Mark Dixon 28
Questions: Conditions • What is the result of (pic. Main. style. pos. Left is 5589): pic. Main. style. pos. Left > 4400 true • Write an expression to check if: the pos. Left of pic. Main is larger than 167 pic. Main. style. pos. Left > 167 • Write an expression to check if: pic. Main pos. Top is more than pic. Ball pos. Top pic. Main. style. pos. Top > pic. Ball. style. pos. Top Mark Dixon 29
Example: Student Loan (v 2) <html> <head><title>Student Loan Repayment Calculator</title></head> <body> <center><font size="+2"><b>Student Loan Repayment Calculator</b></font></center> <input id="txt. Income" type="text" /> <input id="btn. Calc" type="button" value="Calculate" onclick="btn. Calc_on. Click()" /> <p id="par. Payment"></p> </body> </html> <script language="javascript"> function btn. Calc_on. Click(){ if (txt. Income. value > 21000){ par. Payment. inner. Text = "£" + ((txt. Income. value - 21000) * 0. 09); }else{ par. Payment. inner. Text = "You pay nothing (£ 0. 00)!"; } Mark }Dixon 30
If statements: Errors missing if (pic. Man. width > 5) document. bg. Color = "red"; { } if (txt. Num. value > 5){ if (txt. Num. value == 4){ document. bg. Color = "green"; } missing } Mark Dixon 31
Example: Ball Char (v 2) • Functional Decomposition • Incremental Development • Get ball char to move automatically: – get ball char to appear on left of page – get ball char to move right on page (user click) – get ball char to move right on page automatically Mark Dixon 32
Example: Ball Char (v 2) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> procedure </body> Interval </html> name (in milliseconds: 1000 = 1 s) <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; } </script> Mark Dixon 33
Example: Ball Char • Functional Decomposition • Incremental Development • Get ball char to bounce horizontally: – get ball char to appear on left of page – get ball char to move right on page (user click) – get ball char to move right on page automatically – get ball char to stop at end – get ball char to change direction Mark Dixon 34
Example: Ball Char (v 2. 1) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ if (pic. Ball. style. pos. Left < document. body. client. Width){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; } Mark Dixon 35
Example: Ball Char (v 2. 2) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ if ((pic. Ball. style. pos. Left + pic. Ball. width) < document. body. client. Width){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; } } </script> Mark Dixon 36
Example: Ball Char (v 2. 3) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ if ((pic. Ball. style. pos. Left + pic. Ball. width + 5) < document. body. client. Width){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; } } </script> Mark Dixon 37
Example: Ball Char (v 2. 4) • Bounce from side to side, with sound: Mark Dixon 38
Example: Pizza Delivery A Pizza shop provides a delivery service. If the delivery is within five miles of the shop, then no delivery fee is charged. If the cost of the goods is less than £ 10 then a £ 3 delivery fee is charged, otherwise a £ 1. 50 delivery fee is charged. Mark Dixon 39
Decision Trees • Natural language – ambiguous & difficult to follow • Decision trees – express same information clearly Free distance <= 5 miles Y N Mark Dixon value >= £ 10 Y N £ 1. 50 £ 3. 00 40
Example: Pizza Delivery • Nested If statements – one if inside another if Mark Dixon <html> <head><title>Delivery</title></head> <body> <p>Distance: <input type="text" id="txt. Dist" /><br /> Cost: <input type="text" id="txt. Cost" /> <input type="button" id="btn. Calc" value="Calc" onclick="btn. Calc_on. Click()" /> </p> <p id="lbl. Charge"></p> </body> </html> <script language="javascript"> function btn. Calc_on. Click(){ if (txt. Dist. value <= 5){ lbl. Charge. inner. Text = "Delivery Charge: £ 0. 00"; }else{ if (txt. Cost. value >= 10){ lbl. Charge. inner. Text = "Delivery Charge: £ 1. 50"; }else{ lbl. Charge. inner. Text = "Delivery Charge: £ 3. 00"; } } } 41 </script>
Logical Operators Use to join conditions (pic. Main. v. Space is 23): • And True when both items are True pic. Main. v. Space > 5 && pic. Main. v. Space < 35 pic. Main. v. Space < 10 && pic. Main. v. Space > 55 pic. Main. v. Space > 6 && pic. Main. v. Space < 23 pic. Main. v. Space >= 6 && pic. Main. v. Space <= 23 true false true • Or True when either item is True pic. Main. v. Space == 23 || pic. Main. v. Space == 11 true pic. Main. v. Space < 10 || pic. Main. v. Space > 55 false • Not True when item is False ! (pic. Main. v. Space == 23) Mark Dixon false 42
Logical Operators: Errors if (pic. Man. width > 5 && < 10){ document. bg. Color = "red"; } missing data if (pic. Man. width > 5 && pic. Man. width < 10){ document. bg. Color = "red"; } Mark Dixon 43
Tutorial Exercises: Multiplication • LEARNING OBJECTIVE: use if statement to perform conditional execution • Task 1: Get the Multiplication v 1 examples (from the lecture) working. • Task 2: Modify your program so that the text box is disabled after the answer is checked • Task 3: Modify your program so that it makes a suitable sound when the user gets the answer right/wrong. Sound files are in the resources section of the web-site Mark Dixon 44
Tutorial Exercises: Student Loan • LEARNING OBJECTIVE: use if statement to perform conditional execution • Task 1: Get the Student Loan v 1 and v 2 examples (from the lecture) working. • Task 2: Modify your program so that it calculates and displays monthly income and repayment amounts (as well an annual). Mark Dixon 45
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) Mark Dixon 46
Tutorial Exercises: Ball Char • LEARNING OBJECTIVE: to assign a value to a object's property, • using combination of literal values, operators, functions, and identifiers • Task 5: get the ball char (v 2) example working • Task 6: add a button that resets the ball char's horizontal position to 0 • Task 7: add a text box that allows the user to control the speed of the ball character. HINT: Currently, the ball char will always move 5 pixels at a time. • Task 8: add a button that stops the ball char moving. HINT: button should put 0 into the text box • Task 9: add two buttons – one for fast and one for slow • Task 10: add two more buttons – one for fast backwards and one for slow backwards • Task 11: make it bounce off both sides of the client area (screen). • Task 12: hide the speed text box HINT: this should happen when the window loads, using style. visibility • Task 13: make the Ball Character blink when the mouse moves over it • Task 14: play a sound when the ball character is clicked Mark Dixon 47
Tutorial Exercises: Pizza Delivery • LEARNING OBJECTIVE: use nested if statements to perform conditional execution • Task 1: Get the Pizza Delivery example (from the lecture) working. Mark Dixon 48
Mark dixon artist
Mark dixon
Dixon's q test
Nctest admin
Metrics for automation testing
First conditional structure
Past real conditional and past unreal conditional
George washington dixon
Gda academy
Dixon montessori charter school
David dixon ubc
A mason dixon memory
Paul dixon smu
Karen k dixon
Circulacion vegetal
Dixon case study
Potky
Mg ins
Alesha dixon he does nothing
Dixon campus jefferson
Jennifer dixon car accident
Dixon swivel joints
Define absolute convergence
Openathens admin
Nextera questar ny
Ny.nextera.questar
Business admin level 3 project presentation examples
Quizizz
Rosetta stone sign in page
Gmetrix student login
Efleetadmin
Esanjeevani.in/doctor/dashboard
Državna matura datumi
Aikido/admin/auth
Forces lms
Admin eguide cern
Administrasi pembukuan adalah
Tugas administrasi puskesmas
Special education academy
Laserfiche admin training
Join surface hub to domain
Grouper admin
Gmetrix access code
Admin
Brocade proc_rqrd
Maryland motorcycle safety program
Benilde sis admin
Banner admin pages
National 5 admin and it
