fluency with information technology info100 and cse100 katherine deibel 2012-05-02katherine deibel,...

JavaScript FormsOne Step Closer to Your Own Phishing Site

Fluency with Information Technology

INFO100 and CSE100

Katherine Deibel

2012-05-02 Katherine Deibel, Fluency in Information Technology 1

Dynamic Web Pages

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


New HTML Tags!

<form></form> <label></label> <input/> <fieldset></fieldset> <legend></legend> <textarea></textarea> <select></select> <option></option>


Katherine Deibel, Fluency in Information Technology 4

1. What is shown in the message box from the following JavaScript?

alert('Sum of 7 + 3 is " + 7 + 3);

2012-05-02

A. B. C. D. E.

20% 20% 20%20%20%A. 10B. 11C. 73D. 37E. Note of the above

1. What is shown in the message box from the following JavaScript?

alert('Sum of 7 + 3 is " + 7 + 3);

A. 10B. 11C. 73D. 37E. Note of the above


Remember, JS uses order of operations when calculating.

The first calculation here is the string concatenation.


2. What is shown in the message box from the following JavaScript? alert('Sum of 9 + 7 is " + (9 + 7));

2012-05-02

A. B. C. D. E.

20% 20% 20%20%20%A. 97B. 79C. 42D. 16E. Over 9000

2. What is shown in the message box from the following JavaScript? alert('Sum of 9 + 7 is " + (9 + 7));

A. 97B. 79C. 42D. 16E. Over 9000


Here, the parentheses take precedence, and the first operation is the addition.

By their powers combined…

form a FORM! Notice that FORM

contains different types of widgets

Part of fluency is knowing the names of the various widgets


The <form> tag

Form widgets cannot exist on their own and Must be located between <form></form>

Multiple forms can be on a single page Place associated widgets in the same form

Easier to use <fieldset> tags to separate individual widgets (see later slides)


The <form> tag

The <form> tag is generally invisible to the user Only a container

for the widgets

Can be styled with CSS

form { background-color: lightgray; }


<form>'s action attribute

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:

<form action="">


<input/> and <label> tags

Most form widgets are created by the <input/> tag Text fields

Password fields

Radio buttons

Checkboxes

File chooser

Buttons

●●●●●●●●●



The <label> tag gives a label to an <input/> tag Clicking on the label

gives that widget the current focus

To meet accessibilitystandards, all inputs(except buttons) require a label Also true for other

form widgets

●●●●●●●●●




<input/>'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 <label>'s attributes

for: the id of the input the tag labels

2012-05-02


The <label> tag gives a label to an <input/> tag Clicking on the label

gives that widget the current focus

To meet accessibilitystandards, the 95% rule is that all inputs(except buttons) require a label Also true for other

form widgets

●●●●●●●●●


<label> and <input/> tags


●●●●●●●●●

<label class="textLabel" for="firstName">First Name:</label> <input type="text" id="firstName" />

<input/> type: text & password

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


<input/> type: checkbox

Requires the value attribute value should reflect the checkbox's purpose

Use name to associate related checkboxes


<input type="checkbox" name="pets" id="cats" value="cats" /><label for="cats">Cats</label>

<input type="checkbox" name="pets" id="dogs" value="dogs" /><label for="dogs">Dogs</label>

<input/> type: radio

Radio buttons allow only one option to be selected at a time Each option gets its own <input/> tag and value

Group related radio buttons by name


<input type="radio" name="gender" id="male" value="male" /><label for="male">Male</label>

<input type="radio" name="gender" id="female" value="female" /><label for="female">Female</label>


<input/> type: file

Creates a combined textfield and button to let the user select a local file on the user's computer

2012-05-02

●●●●●●●●●

<label class="textLabel" for="resume">Resume:</label><input type="file" id="resume" />


Form Buttons

<input/> actually offers several types of buttons reset: clears each widget in the

form

submit: sends form data to the location specified at <form action="…">

button: a generic button We will use only reset and button in

this class2012-05-02


<input/> type: reset & button

All button types require the value attribute

value is the text displayed on thebutton

2012-05-02

●●●●●●●●●

<input type="reset" value="Reset" class="resetButton" /><input type="button" value="Submit Your Info…" style="float:right" />

Why are the buttons different?

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!)


<input type="reset" value="Reset" class="resetButton" /><input type="button" value="Submit Your Info…" style="float:right" />


3. The <input …/> tag is for specifying

2012-05-02

A. B. C. D.

25% 25%25%25%A. Both input and output operations

B. Input operations onlyC. Output operations onlyD. Not applicable since it is not

a legal tag in XHTML

3. The <input …/> tag is for specifying

A. Both input and output operations

B. Input operations onlyC. Output operations onlyD. Not applicable since it is not

a legal tag in XHTML


<input type="text" /> can be used for both input and output: Getting input from the user typing Displaying text messages without

the annoyance of an alert

Other form widgets


●●●●●●●●●

<fieldset></fieldset>(border around form)

<legend>Example Form</legend>

<textarea> I NEED THIS JOB!</textarea>

<select id="month"> <option value="Jan">…</option> …</select>(border around form)

Making Forms do WorkAdding Events


A. B. C. D.

25% 25%25%25%

4. A(n) ___ is an indication from the computer that something just happened.

A. Event

B. Notification

C. Feedback

D. Alert


Events

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 <input … /> tag an event handler gives the processing needed for the task using JavaScript

In the <input … /> tag an event handler gives the processing needed for the task using JavaScript



5. What has to happen for the ondblclick event to occur?

2012-05-02

A. B. C. D.

25% 25%25%25%A. The user right-clicks the mouse B. The user double clicks the mouseC. The user pushes both mouse

buttons at the same timeD. The user pushes the left mouse

button and then the right button in quick succession

Rules for Event Handlers

For event handlers like onclick you must Treat them like attributes:

<input type="button" value="Click" onclick="…"/>

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 rules2012-05-02 Katherine Deibel, Fluency in Information Technology 31

Demo

onclick is an event that is triggered when a widget is clicked on (as in clicking on a button)

<form action=""><input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" />

<input type="text" id="dataOut"/>

</form>



</form>


Demo: Explanation

We use an assignment to change the text box's value



</form>

refers to the current web pagerefers to the 1st form

says we want to change value in window

refers to text window of this name


The Calculation demo

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 valuesin the first two text boxes

How JS multiplies the values

How JS puts the product in the last text box


The Basic Idea of Event Handlers

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


A Major Event: Page Loaddocument.write()


Build A Page On-The-Fly

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


Demo: document.write()

<head> <script type="text/javascript"> var school=confirm("Are you a Husky?"); if (school == 1) { document.write("<h1>HUSKIES!!!</h1>"); document.bgColor = 'purple'; document.fgColor = 'gold'; } else { document.write(" <h5>Cougars.... yay</h5>"); document.bgColor = 'red'; document.fgColor = 'white'; } </script></head>


Demo: document.write()

By deciding before the page is set-up, the whole look and feel can be controlled!


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

Summary


fluency with information technology info100 and cse100 katherine deibel 2012-05-02katherine deibel,...

Documents