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

Post on 29-Dec-2015

216 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

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

New HTML Tags!

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

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

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

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

Remember, JS uses order of operations when calculating.

The first calculation here is the string concatenation.

Katherine Deibel, Fluency in Information Technology 6

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

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

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

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

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)

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

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; }

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

<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="">

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

<input/> and <label> tags

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

Password fields

Radio buttons

Checkboxes

File chooser

Buttons

●●●●●●●●●

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

<input/> and <label> tags

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

●●●●●●●●●

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

Katherine Deibel, Fluency in Information Technology 14

<input/> and <label> tags

<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

<input/> and <label> tags

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

●●●●●●●●●

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

<label> and <input/> tags

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

●●●●●●●●●

<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

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

<input/> type: checkbox

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

Use name to associate related checkboxes

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

<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

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

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

Katherine Deibel, Fluency in Information Technology 20

<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" />

Katherine Deibel, Fluency in Information Technology 21

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

Katherine Deibel, Fluency in Information Technology 22

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

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

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

Katherine Deibel, Fluency in Information Technology 24

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

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

<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

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

●●●●●●●●●

<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

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

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

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

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

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

Katherine Deibel, Fluency in Information Technology 30

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 action=""><input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" />

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

</form>

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

Demo: Explanation

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

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

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

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

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

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

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

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

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

A Major Event: Page Loaddocument.write()

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

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

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

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>

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

Demo: document.write()

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

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

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

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

top related