Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1

 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 Katherine Deibel, Fluency in Information Technology2

 Katherine Deibel, Fluency in Information Technology3

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

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

Katherine Deibel, Fluency in Information Technology6 A.97 B.79 C.42 D.16 E.Over 9000

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

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

 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) Katherine Deibel, Fluency in Information Technology9

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

 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: Katherine Deibel, Fluency in Information Technology11

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

 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 ●●●● ●●●●● Katherine Deibel, Fluency in Information Technology13

 '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 Katherine Deibel, Fluency in Information Technology14

 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 ●●●● ●●●●● Katherine Deibel, Fluency in Information Technology15

Katherine Deibel, Fluency in Information Technology16 ●●●● ●●●●● First Name:

 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 Katherine Deibel, Fluency in Information Technology17

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

 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 Katherine Deibel, Fluency in Information Technology19 Male Female

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

 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 Katherine Deibel, Fluency in Information Technology21

 All button types require the value attribute  value is the text displayed on the button Katherine Deibel, Fluency in Information Technology22 ●●●● ●●●●●

 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!) Katherine Deibel, Fluency in Information Technology23

Katherine 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

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 Katherine 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

Katherine Deibel, Fluency in Information Technology26 ●●●● ●●●●● (border around form) Example Form I NEED THIS JOB! … (border around form)

Adding Events Katherine Deibel, Fluency in Information Technology27

A.Event B.Notification C.Feedback D.Alert Katherine Deibel, Fluency in Information Technology28

 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 Katherine Deibel, Fluency in Information Technology29

Katherine 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

 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 Katherine Deibel, Fluency in Information Technology31

 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!'" /> Katherine Deibel, Fluency in Information Technology32

 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 Katherine Deibel, Fluency in Information Technology33

 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 Katherine Deibel, Fluency in Information Technology34

 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 Katherine Deibel, Fluency in Information Technology35

document.write() Katherine Deibel, Fluency in Information Technology36

 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 Katherine Deibel, Fluency in Information Technology37

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'; } Katherine Deibel, Fluency in Information Technology38

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

 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 Katherine Deibel, Fluency in Information Technology40