1. Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-05-02Katherine Deibel, Fluency in Information Technology1

2.  We have used alert() and confirm() to communicate with users  But that is very crude interaction  We can create greater interactivity through JS and XHTML forms  Create buttons, textboxes, and lists  Input, manipulate, and output data 2012-05-02Katherine Deibel, Fluency in Information Technology2

3.  2012-05-02Katherine Deibel, Fluency in Information Technology3

4. 2012-05-02Katherine Deibel, Fluency in Information Technology4 A.10 B.11 C.73 D.37 E.Note of the above

5. A.10 B.11 C.73 D.37 E.Note of the above 2012-05-02Katherine Deibel, Fluency in Information Technology5 Remember, JS uses order of operations when calculating. The first calculation here is the string concatenation.

6. 2012-05-02Katherine Deibel, Fluency in Information Technology6 A.97 B.79 C.42 D.16 E.Over 9000

7. A.97 B.79 C.42 D.16 E.Over 9000 2012-05-02Katherine Deibel, Fluency in Information Technology7 Here, the parentheses take precedence, and the first operation is the addition.

8.  form a FORM!  Notice that FORM contains different types of widgets  Part of fluency is knowing the names of the various widgets 2012-05-02Katherine Deibel, Fluency in Information Technology8

9.  Form widgets cannot exist on their own and Must be located between  Multiple forms can be on a single page  Place associated widgets in the same form  Easier to use tags to separate individual widgets (see later slides) 2012-05-02Katherine Deibel, Fluency in Information Technology9

10.  The tag is generally invisible to the user  Only a container for the widgets  Can be styled with CSS form { background-color: lightgray; } 2012-05-02Katherine Deibel, Fluency in Information Technology10

11.  Require attribute: action  Tells the browser where the program is that will process the form  JSP file, ASP file, Java App, etc.  We don't need it!  Since it is required, we use the empty string for its specification: 2012-05-02Katherine Deibel, Fluency in Information Technology11

12.  Most form widgets are created by the tag  Text fields  Password fields  Radio buttons  Checkboxes  File chooser  Buttons ●●●● ●●●●● 2012-05-02Katherine Deibel, Fluency in Information Technology12

13.  The tag gives a label to an tag  Clicking on the label gives that widget the current focus  To meet accessibility standards, all inputs (except buttons) require a label  Also true for other form widgets ●●●● ●●●●● 2012-05-02Katherine Deibel, Fluency in Information Technology13

14.  's attributes:  type: kind of input widget (e.g., button)  id: unique identifier for the widget  name: identifier for a group of widgets  value: optional, used only for some types  's attributes  for: the id of the input the tag labels 2012-05-02Katherine Deibel, Fluency in Information Technology14

15.  The tag gives a label to an tag  Clicking on the label gives that widget the current focus  To meet accessibility standards, the 95% rule is that all inputs (except buttons) require a label  Also true for other form widgets ●●●● ●●●●● 2012-05-02Katherine Deibel, Fluency in Information Technology15

16. 2012-05-02Katherine Deibel, Fluency in Information Technology16 ●●●● ●●●●● First Name:

17.  type="text"  Creates a textbox / text field that allows for a single line of text  Default width is 20 characters  type="password"  Creates the same as "text" but characters are hidden (circles, asterisks, etc.) when typed 2012-05-02Katherine Deibel, Fluency in Information Technology17

18.  Requires the value attribute  value should reflect the checkbox's purpose  Use name to associate related checkboxes 2012-05-02Katherine Deibel, Fluency in Information Technology18 Cats Dogs

19.  Radio buttons allow only one option to be selected at a time  Each option gets its own tag and value  Group related radio buttons by name 2012-05-02Katherine Deibel, Fluency in Information Technology19 Male Female

20.  Creates a combined textfield and button to let the user select a local file on the user's computer 2012-05-02Katherine Deibel, Fluency in Information Technology20 ●●●● ●●●●● Resume:

21.  actually offers several types of buttons  reset: clears each widget in the form  submit: sends form data to the location specified at  button: a generic button  We will use only reset and button in this class 2012-05-02Katherine Deibel, Fluency in Information Technology21

22.  All button types require the value attribute  value is the text displayed on the button 2012-05-02Katherine Deibel, Fluency in Information Technology22 ●●●● ●●●●●

23.  The CSS only changed the colors and font-weight  Browsers have default styling for widgets  Note the rounded corners on Submit button  CSS can deactivate the default styles (GRRR!) 2012-05-02Katherine Deibel, Fluency in Information Technology23

24. 2012-05-02Katherine Deibel, Fluency in Information Technology24 A.Both input and output operations B.Input operations only C.Output operations only D.Not applicable since it is not a legal tag in XHTML

25. A.Both input and output operations B.Input operations only C.Output operations only D.Not applicable since it is not a legal tag in XHTML 2012-05-02Katherine Deibel, Fluency in Information Technology25 can be used for both input and output:  Getting input from the user typing  Displaying text messages without the annoyance of an alert

26. 2012-05-02Katherine Deibel, Fluency in Information Technology26 ●●●● ●●●●● (border around form) Example Form I NEED THIS JOB! … (border around form)

27. Adding Events 2012-05-02Katherine Deibel, Fluency in Information Technology27

28. A.Event B.Notification C.Feedback D.Alert 2012-05-02Katherine Deibel, Fluency in Information Technology28

29.  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 2012-05-02Katherine Deibel, Fluency in Information Technology29

30. 2012-05-02Katherine Deibel, Fluency in Information Technology30 A.The user right-clicks the mouse B.The user double clicks the mouse C.The user pushes both mouse buttons at the same time D.The user pushes the left mouse button and then the right button in quick succession

31.  For event handlers like onclick you must  Treat them like attributes:  so you will type: onclick=" … "  Put inside the quotes the operations to be performed when the event happens … this will be standard JavaScript  No script tags required  Follow usual JS rules 2012-05-02Katherine Deibel, Fluency in Information Technology31

32.  onclick is an event that is triggered when a widget is clicked on (as in clicking on a button) <input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" /> <input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" /> 2012-05-02Katherine Deibel, Fluency in Information Technology32

33.  We use an assignment to change the text box's value <input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" /> refers to the current web page refers to the 1 st form says we want to change value in window refers to text window of this name 2012-05-02Katherine Deibel, Fluency in Information Technology33

34.  Linked on Calendar for today  Looked at the HTML and JS for this page and pay attention to the following:  The layout of the 3 text fields and button  The button's use of  How the JS gets the values in the first two text boxes  How JS multiplies the values  How JS puts the product in the last text box 2012-05-02Katherine Deibel, Fluency in Information Technology34

35.  Consider the form and the data stored in  What will trigger the browser to do something  that is the event  When the vent happens, ask yourself: "What should the computer do when that "event happens?"  that is handling the event 2012-05-02Katherine Deibel, Fluency in Information Technology35

36. document.write() 2012-05-02Katherine Deibel, Fluency in Information Technology36

37.  document.write() is a function that puts text into the Web page as it is being created  It works because the browser runs all of the JS before displaying the page, thus allowing JS to create HTML on the fly  Can even put document.write() in a script in the head of a page 2012-05-02Katherine Deibel, Fluency in Information Technology37

38. var school=confirm("Are you a Husky?"); if (school == 1) { document.write(" HUSKIES!!! "); document.bgColor = 'purple'; document.fgColor = 'gold'; } else { document.write(" Cougars.... yay "); document.bgColor = 'red'; document.fgColor = 'white'; } 2012-05-02Katherine Deibel, Fluency in Information Technology38

39.  By deciding before the page is set- up, the whole look and feel can be controlled! 2012-05-02Katherine Deibel, Fluency in Information Technology39

40.  Forms are the basis for interaction on web pages  Events, event handlers, and JavaScript are the means by which the interaction occurs  Lots of options for creating dynamic web pages 2012-05-02Katherine Deibel, Fluency in Information Technology40