1 / 33

Understanding Events, Properties, and Keywords in Coding

Learn about events, properties, and keywords in code, including unique elements and their functions. Gain insights on expressions, operators, functions, and more.

keelty
Télécharger la présentation

Understanding Events, Properties, and Keywords in Coding

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 03 – Information Processing:Expressions, Operators & Functions

  2. Questions: Events • Consider the following code: a) How many unique events does it contain? b) Name the event(s). Sub btnAns_OnClick() document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 1 Click OnClick

  3. Questions: Properties • Consider the following code: a) How many uniqueproperties does it contain? b) Name the properties. Sub btnAns_OnClick() document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 2 bgcolor, innertext

  4. Questions: Keywords • Consider the following code: a) How many uniquekeywords does it contain? b) Name the keywords. Sub btnAns_OnClick() document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 2 Sub End

  5. Script Debugging • Labs have script debugging disabled • Tools menu • Internet Options • Advanced tab • Disable ScriptDebugging

  6. Session Aims & Objectives • Aims • Introduce you to main processing concepts, i.e. expressions, operators and functions • Objectives,by end of this week’s sessions, you should be able to: • evaluate expressions • assign a value to a object's property, • using combination of literal values, operators, functions, and identifiers

  7. Meet George • Common Boa Constrictor • boa constrictor imperator • Native toCentral & SouthAmerica • No venom(no poison)

  8. Looking after George • Problem: • Difficult to keep • Require temperature and humidity controlled environment • Much of the literature is from the US • Temperature in Fahrenheit: 80-85F day, 78F minimum at night (P Vosjoli 1998) • Solution • Need a program to convert from Celsius to Fahrenheit

  9. Information Processing Input Data Process Output Data 7 + 16 9 • All computing problems: • involve processinginformation/data • information has meaning (e.g. 5lb 3.3kg 18 years) • data has no meaning (e.g 5 3.3 18) • following this pattern: • For example: • to add two numbers: 7 + 9 = 16

  10. Information Processing (cont.) • Hence, to solve any computing problem ask: • what information goes in • what processing is done to it • what information comes out

  11. Example: Temp (User Interface) <html> <head> <title>Temperature</title> </head> <body> <p>Fahrenheit: <input id="txtFah" style="background-color: lime" type="text" /> <input id="btnCalc" type="button" value="Calculate" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body> </html>

  12. Example: Temp (processing) Fahrenheit Process Celsius • To convert from Fahrenheit to Celsius: e.g. Fahrenheit is: 50 c= 10

  13. Operators • Sit between the data = assignment operator5 + 2 addition operator result is 7 5 - 2 subtraction operator result is 3 5 * 2 multiplication operator result is 10 5 / 2 division operator result is 2.5 • convert mathematical symbols into operators: c= ((f – 32) * 5) / 9

  14. Symbolic Representation Puts 50 into txtFah.ValueThe symbol txtFah.Value now represents 50 • Symbols (names) represent data txtFah.Value = 50 • replace mathematical symbols with objects:parCel.innertext = ((txtFah.value - 32) * 5) / 9

  15. Expressions • The following assignmentstatement:parCel.innertext = ((txtFah.value - 32) * 5) / 9 contains an expression • Given: txtFah.Value = "68"can evaluate expression:parCel.innertext = ((txtFah.value - 32) * 5) / 9(from above)parCel.innertext = ((68 - 32) * 5) / 9 (substitute)lblResult.InnerText = 20 (calculate)

  16. Example: Temp (code) <html> <head> <title>Untitled Page</title> <script language="vbscript"> Sub btnCalc_OnClick() parCel.innertext = ((txtfah.value - 32) * 5) / 9 End Sub </script> </head> <body> <p>Fahrenheit: <input id="txtFah" style="background-color: lime" type="text" /> <input id="btnCalc" type="button" value="Calculate" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body> </html>

  17. Expression Evaluation

  18. Expression Errors data data data data operator operator operator many peopleinstinctively knowthese are wrong • 23 + 11 - txtNum1.Value * 2 • 34 + * 12 + txtNum1.Value doodod • txtNum1.Value + 1 – 21 45 dododd

  19. Example: Ball Char (v2) • 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

  20. Client-side Object Model • window object – properties include: • .status: get/set status barwindow.status = “Hello” • .close: close current windowwindow.close • .SetInterval: allow timed actions • document object – properties include: • .title: get/set title of page • .write: write text to page • .bgColor: get/set background colour of page • .location: get/set current location of browser

  21. Example: Ball Char (v2) <html> <head> <title>Ball Char v2</title> <script language="VBScript"> Sub window_OnLoad() window.SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight() picBall.hspace = picBall.hspace + 5 End Sub </script> </head> <body bgcolor="#00ff00"> <p><img id=picBall src="BallChar.jpg" hspace=0 vspace=11></p> </body> </html> Procedure name Interval(in milliseconds: 1000 = 1s)

  22. Functions & Operators • Used to: • process (manipulate) data • Both Functions & Operators: • take input data/parameters (1 or more item) • process it • return a result • which replaces the expression (substitution) Function Parameter(s) Result SQR (16) 4

  23. Functions (cont.) • Functions: come before the data (which is in brackets)Sqr(16) square root result is 4Abs(-23) absolute value result is 23Int(2.543) integer result is 2Sin(3.1) sine result is 0.998Cos(0) cosine result is 1

  24. Questions: Expressions • What is the result of: Int(12.93) / 2 • What is the result of:1 + Int(5.76786) + Sqr(Int(9.4523)) • Write an expression to: give the square root of 9 • Write an expression to:give the integer value of 16.7658765 6 1 + 5 + 3 = 9 Sqr(9) Int(16.7658765)

  25. Example: Navigation • Survey ship • mapping sea bed • must avoid oil rigs • 8km of streamers(with hydrophones) • 7-9 hours to turn • know • cable length (500m) • cable angle • work out • how far out

  26. Example: Navigation • Need to ensure horizontal distance • between ship and outer bouy (a) is less than • between ship and oil rig (b) b • bouy moves with current • sensor equipment worth ~£30 million • impossible to replace quickly a

  27. Trigonometry: Triangles SOH CAH TOA Sin(ang) = O/H O = Sin(ang) * H Cos(ang) = A/H A = Cos(ang) * H Tan(ang) = O/A angle (ang) hypotenuse (H) =500m adjacent (A) opposite (O)

  28. Trigonometry: Radians π π/2 • Radians used by computers instead of degrees: 0 or 360 deg (0 or 6.2 rad) (4.65 rad) 270 deg 90 deg (1.55 rad) 180 deg (3.1 rad) rad = (deg/180) * 3.1

  29. Example: Navigation <html> <head> <title>Navigation</title> <script language=vbscript> Sub Window_OnLoad() imgShip.style.left = 100 imgShip.style.top = 200 imgOilR.style.left = 150 imgOilR.style.top = 100 End Sub </script> </head> <body> <p> Angle: <input id=txtAngle type=text value=10 /> <input id=btnCalc type=button value=Calc /> </p> <p id=parAngle></p> <img id=imgShip src=Ship.gif style="position: absolute" /> <img id=imgBouy src=Bouy.gif style="position: absolute" /> <img id=imgOilR src=OilR.gif style="position: absolute" /> </body> </html>

  30. Tutorial Exercises: Temperature • LEARNING OBJECTIVE: to assign a value to a object's property, • using combination of literal values, operators, functions, and identifiers • Task 1: get the temperature example working • Task 2: modify the temperature example so that it has two extra buttons – a plus and minus to increase and decrease the temperature

  31. Tutorial Exercises: Exchange • LEARNING OBJECTIVE: to assign a value to a object's property, • using combination of literal values, operators, functions, and identifiers • Task 1: create a new page that helps the user covert from Pounds to Dollarsuse the web to find the current exchange rate

  32. 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 1: get the ball char (v2) example working • Task 2: add a button that resets the ball char's horizontal position to 0 • Task 3: add a text box that allows the user to enter the rate of increase • Task 4: add a button that stops the ball char moving. HINT: button should put 0 into the text box • Task 5: add two buttons – one for fast and one for slow • Task 6: add two more buttons – one for fast backwards and one for slow backwards • Task 7: use the properties window to hide the speed text box.

  33. Tutorial Exercises: Navigation • LEARNING OBJECTIVE: to assign a value to a object's property, • using combination of literal values, operators, functions, and identifiers • Task 1: get the Navigation example workingwhen the user clicks the Calc button, your program should calculate the angle in radians, and use this to re-position the bouy • Task 2: modify the Navigation example so that the plus and minus buttons change the number of degrees by a value of 5

More Related