1. CIS101 Introduction to Computing Week 10

2. Agenda Your questions Final exam and final project CIS101 Student Survey Class presentations: Your Mad Libs JavaScript: Arithmetic and Events Lesson 03, 04, and 05 This week online Next class

3. Final exam & final project In class exam (20% final grade) Covers Excel, HTML, JavaScript Practice exam will be handed out next week In class exam scheduled for week 13 Final group project (20% final grade) Teams of 2 students will produce Web site combining HTML and JavaScript Topic of your choice

4. CIS101 Student Survey Second survey for CIS101 Final survey will be at end of semester This is a pilot for revised CIS101 Your feedback will help us assess and improve CIS101 Click on link in announcement and complete the survey

5. Your Mad Lib Each student will demonstrate their Mad Lib for the class Access your Mad Lib from your Web space

6. Lesson 03 Topics Use the arithmetic operators +, -, *, / to solve problems Use the assignment operator(=) to give a numeric value to a variable How operator precedence controls the order in which an expression is calculated Use the alert method to display information Use the Math object in calculations

7. Using Arithmetic Operators Arithmetic operations in JavaScript are carried out with arithmetic symbols Same as math class (except multiplication is * rather than x) These symbols are called arithmetic operators

8. Arithmetic Operators(cont.) The addition operator + A + B yields the sum of A plus B The subtraction operator – A - B yields the difference A minus B The multiplication operator * A * B yields the product A multiplied by B The division operator / A / B yields the dividend of A divided by B

9. Expressions Expression is computer science term for formula Expression in JavaScript can combine variables, numbers, and arithmetic operators Example: var num1 = 6; var num2 = 3; num1 * 2 is an expression that yields 12 num1/num2 is an expression that yields 2

10. Assignment Operator and Expressions Expressions used with the assignment operator give a value to a variable var length = 5; var width = 6; var area = length * width; (area now has a value of 30)

11. Expressions can combine arithmetic operators Expressions can also have more than one operator: var length = 5; var width = 6; var perimeter; perimeter = length*2 + width * 2; Perimeter now has a value of 22

12. Multiple operators The computer can only execute one operation at a time When an expression has more than one operator, they have to be carried out in order determined by rule of mathematics known as “operator precedence”

13. Operator precedence The operator precedence rules determine the order of evaluation Next slide summarizes operator precedence Operations are carried out in order from top to bottom

14. Operator Precedence Table Type of OperatorExample of Operators Parentheses (Overrides others) ( ) Multiplication, Division *, / Addition, Subtraction+, - Assignment =

15. The alert method The alert method is used to display a small pop up window See example on p. 3-5 Syntax: alert(“message”);

16. In the lab This lab uses arithmetic operators and alert statement Create a new HTML document using 1 st Page 2000 named lesson0301.html Enter the code on p. 3-6 exactly as you see it Add code to calculate perimeter and display its value with alert statement (p. 3-8)

17. Student Modifications Change the first document.write statement to an alert statement Add the following variables: base, height and triangleArea Use assignment operator to store values in base and height Calculate and display the area of a triangle (formula is ½*base*height)

18. Student Modifications cont. Add variables radius, circleArea, circleCircumference Use assignment operator to assign value to radius Calculate and display the area and circumference of a circle using the Math.PI Math.PI is a defined constant that is part of Math object Math.PI stores the value of PI

19. Lesson 04 Topics Data types String data versus numeric data How input data (from the prompt method) is stored as a string Why you need to format input data for arithmetic How to use built in JavaScript functions to format input data for arithmetic (parseInt, parseFloat, and eval)

20. Data Types Data type is a category of information used by a programming language Identifies the type (kind) of information a program can represent JavaScript has three basic data types: String Numeric Boolean

21. String data vs. numeric data String data is used to input and output information Numeric data can carry out arithmetic All information in a computer is stored using just 0s and 1s Inside the computer, strings and numbers use different patterns to store information Need to change a string pattern into a number pattern before computer can execute arithmetic

22. String data versus Numeric data When the prompt method is used to collect data from a Web page visitor, information input is a string Information in the form of a string must be formatted as a number before it can be used for arithmetic

23. How to convert strings to numbers Use these JavaScript methods The parseFloat() method The parseInt() method The eval() method

24. The parseFloat() Method Syntax: var number=parseFloat(string1); parseFloat takes the value stored in string1 and translates it to a decimal format and stores the number in the variable number

25. The parseInt() Method Syntax: var wholeNumber=parseInt(string1): parseFloat takes the value stored in string1 and translates it to a decimal format and stores the number in the variable number

26. The eval() Method The eval() method evaluates a numeric expression in the form of a string and returns its value Syntax: var result=eval(string1); Where string1 is a numeric expression in string format

27. In the lab Use JavaScript methods to convert user input from string format to numeric format and then carry out arithmetic operations Create a new HTML document using 1 st Page 2000 Enter the code on p. 4-6 exactly as you see it Click preview button to test out the code

28. Student Modifications Modify the code on p. 4-6 to prompt users to enter the age of their dog, using parseFloat(), convert the dog’s age to human years using the following formula dogToHumanYears = ((dogAge-1) * 7) + 9 Do other conversions, from cat years (cats live about 20 years) to human years. Look on the internet for other possibilities

29. Lesson 05 Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks The onClick event handler for buttons (forms) The mouse event handlers onMouseOver and onMouseOut

30. Event Driven Programming Event driven programs use events as triggers for program execution Use JavaScript to create event driven Web Pages User actions determine the course of code execution Behavior and appearance of event driven Web page influenced by user

31. What are events? Events are actions taken by the user Examples: Clicking a button Clicking a check box Entering text into a text field Moving the mouse pointer over a hyperlink Changing the contents of a text box Entering or leaving a text box

32. What are event handlers? Event handlers are the JavaScript code that handles (responds) to an event Event handlers are pre-defined keywords in JavaScript

33. Event Handlers (cont.) An event handler is a special attribute associated with hyperlinks, buttons and other elements of a web page Events handlers always begin with on Examples are: onClick – responds to single mouse click onMouseOver – responds when mouse arrow moves over a Web page element such as a link or button onMouseOut – responds when mouse arrow moves off a Web page element

34. onClick Event Handler for Hyperlinks onClick event handler responds when user clicks a hyperlink Example: this code displays an alert message when the link is clicked: Click this link!

35. The onClick Event Handler for Buttons Buttons are elements of HTML forms Create a button by including an an input tag with type set to button inside a form tag Buttons also have onClick event handlers with the same syntax as links:

36. Mouse Event Handlers The onMouseOver event handler is triggered when the mouse is moved over a link Syntax for onMouseOver: onMouseOver = “JavaScript statement(s)” Example: Mouse Over Link

37. Mouse Event Handlers (cont.) The onMouseOut event handler is triggered when the mouse is moved off a link Syntax for onMouseOut: onMouseOut = “JavaScript statement(s)” Example: Mouse Out Event

38. Mouse Event and the Window Status Bar You can use onMouseOver event handler to write a message in the window status bar The window status bar is the thin grey bar at the bottom of the browser window An Example: First

39. In the lab First example uses events to change the background color of your Web document Create a new HTML document using 1 st Page 2000, then enter the code on p. 5- 11 exactly as you see it Click preview button to test each color

40. Now add these modifications Add three more colors You will need three more links and event handlers See Appendix C for additional colors Select six contrasting colors for the fgColor property (color of text) For all six links, insert a second statement changing the fgColor property to the selected contrasting color

41. OnClick for buttons This example implements onClick event handler for buttons Nearly identical syntax to onclick event handler for hyperlinks onClick event handler responds when visitor clicks button

42. OnClick button example Save work from previous exercise Start new html document named lesson0502.html Enter code on p. 5-13 Modification: add another button and use its onClick event hander to display a different message

43. Swapping Images Common JavaScript trick swaps images when a mouse arrow passes over a link or an image When mouse arrow goes over an image the picture changes Need to first create a hyperlink using an image This is needed because mouse events are not defined for images, are only defined for links and buttons

44. Image Swap Example Save your earlier work Open up a new html document and save it with the name lesson0502.html Copy required image files from f: drive (javascript 101 folder) into same folder as your code blueArrow.gif redArrow.gif Enter the code on p. 5-14 exactly as you see it Modification: find two other images on the internet, copy them into your code folder, and change the code to swap the two new images instead

45. JavaScript Homework Select one of the following exercises: Exercise 3_1, 3_2, 3_3, 3_4 or Exercise 5_1, 5_2, 5_3, 5_4 Hand in printout of your HTML document Upload your html with JavaScript code to digital dropbox

46. This week online Readings Concepts, chapter 4, “The System Unit” JavaScript 101 Lesson 03, Lesson 04, Lesson 05 This week’s quiz Concepts, chapter 4, “The System Unit”

47. Next class meeting Bring your JavaScript book to class Continue with JavaScript