1. Today’s Announcements` If you have problems with the assignments, don’t be afraid to ask for help Assignment 6 is due and will be graded before the end of class so you can have it to study by Test 2 on chapters 7-10 will be held on Tuesday, 7/13/2004 at 4:00pm Assignments 1-3 will no longer be accepted Last day to turn in assignment 4 for reduced credit The class website has been updated to show the new syllabus Tip of the Day : Reading the chapters before the start of class might help to understand the material

2. Screen Input and Output The form of © Lawrence Snyder, 2004

3. Manipulating Data Last time, we saw JS put text ( 4 ) in the source file before finishing the page Now we see JS create buttons and windows, and manipulate data in the finished page

4. Forms Input & Output in JS are given in forms  Inside tags  Notice type value relationship to text for good results … for good results …

5. More Forms  Notice type name size relationship to text... Enter data here:...... Enter data here:...

6. Radio Control  Notice type name (common) relationship to text... Radio buttons: Left or right.... Radio buttons: Left or right.

7. Input/Output Windows are input or output based on your point of view …  Programming uses computer’s view It’s obvious that buttons are inputs Windows are inputs, but if the computer puts information in them, they’re outputs HumanComputer Forms define the type of I/O and the processing

8. Events Cause Processing After drawing a page, browsers sit idle waiting for something to happen … when we give input, it cause events Processing the input is the task of an event handler  Event types onClick onChange onMouseOver In the tag an event handler gives the processing needed for the task using JavaScript

9. Observe Actions

10. ‘onClick’ Event for Buttons  Event handlers say what to do if event happens … “put ‘Smiley’ in the output window” Emoticons... Emoticons... Event handlers = mini programs

11. ‘onClick’ for Buttons  Notice … ‘ onClick ’ event does the task: place ‘Smiley’ in the output window Emoticons... Emoticons...

12. x.value  Notice … the value of a text window is the contents of the window x.value Emoticons... Emoticons... window name

13. ‘onChange’ Event  Notice names + is concatenate Adding a smile to <input type="text" name="x2" size=2 onChange="x5.value = x2.value + ')' "> Adding a wink to <input type="text" name="x3" size=2 onChange="x5.value = ';' + x3.value"> Adding a frown to <input type="text" name="x4" size=2 onChange="x5.value = x4.value + '(' "> Makes Adding a smile to <input type="text" name="x2" size=2 onChange="x5.value = x2.value + ')' "> Adding a wink to <input type="text" name="x3" size=2 onChange="x5.value = ';' + x3.value"> Adding a frown to <input type="text" name="x4" size=2 onChange="x5.value = x4.value + '(' "> Makes

14. Name A Different Window … Adding a smile to <input type="text" name="x2" size=2 onChange="x5.value = x2.value + ')' "> Adding a wink to <input type="text" name="x3" size=2 onChange="x5.value = ';' + x3.value"> Adding a frown to <input type="text" name="x4" size=2 onChange="x5.value = x4.value + '(' "> Makes … Adding a smile to <input type="text" name="x2" size=2 onChange="x5.value = x2.value + ')' "> Adding a wink to <input type="text" name="x3" size=2 onChange="x5.value = ';' + x3.value"> Adding a frown to <input type="text" name="x4" size=2 onChange="x5.value = x4.value + '(' "> Makes "x.value = x2.value + ')' "

15. Result … Adding a smile to <input type="text" name="x2" size=2 onChange="x5.value = x2.value + ')' "> Adding a wink to <input type="text" name="x3" size=2 onChange="x5.value = ';' + x3.value"> Adding a frown to <input type="text" name="x4" size=2 onChange="x5.value = x4.value + '(' "> Makes … Adding a smile to <input type="text" name="x2" size=2 onChange="x5.value = x2.value + ')' "> Adding a wink to <input type="text" name="x3" size=2 onChange="x5.value = ';' + x3.value"> Adding a frown to <input type="text" name="x4" size=2 onChange="x5.value = x4.value + '(' "> Makes "x.value = x2.value + ')' "

16. From last lecture...

17. Conditional Conditionals test if an expression is true or not General form … if ( ) ; For example if (day == "Friday") evening_plan = "party";

18. If-Then-Else Branch both ways with If-Then-Else if ( ) ; else ; Example … if ((year%4)== 0) { leapYear = true; febDays = febDays+1; } else leapYear = false;

19. Project 2

20. Project 2: Exercise

21. Purple Concentrate

22. The ultimate goal of the project is to produce the Purple Concentration application.