Assignments5-6-7-8

Honor code notice: your work must be your own. If copyingis detected, the code requirements will be applied.

Assignment #5 –Javascript

There are two alternative levels for basic Assignment 5:Converter carries maximum 80 unitsMultiverter carries maximum 100 units

The alternative Challenge variation is:Guided form

Assignment #6 –Javascript – Pattern searchingAssignment #7 –Tomcat & JSP – simple Xue Bai examplesAssignment #8 –Tomcat & JSP – simple Xue bai examples

inches centimeters

convert

reset

Converts inches to centimeters…or centimeters to inches …depending on which field was filled.

104.04

…then inches are posted here…and vice versa

if centimeters entered here

Converter – simplest problemYou get Partial credit only

Inches OFeet OYards OMiles O

convert

reset

Radio buttons here determineunits on this side

11031.35

…and Feet is selected here…

…then, click converts meters to feet

…if Meters selected here

Centimeters OMeters OKilometers O

Radio buttons here determineunits on metric side

Multi-verter

Challenge Alternative – Guided FormRequired behavior - I

when any field is selected

its background color changes

firstName

middleName

lastName

…and newly selected field's color changes

…but reverts to initial colorwhen the field is de-selected

…use onfocus event for each field

…use onblur event for each field

Challenge Alternative– Guided FormImplementation restrictions- II

.js file defines functions used to produce behavior

external style sheet defines style for

form field background color

html file

CSS sheet javascript file

Html file refers to 2 external files – for styles & javascript

.js file defines functions used to produce behavior

html file

CSS sheet javascript file

1.The functions must use JS this notation to pass DOM field object – one function must work for all fields !!

2. Original background is same for all fields and is picked up from CSS.

3. New background is same for all fields.

Field background style is defined in CSS

Challenge Alternative– Guided FormImplementation restrictions- III

References & notes:

ConverterMulti-verterGuided form

Sebesta:

Following site is useful for tutorials: www. w3schools.com/xml

Assignment #6 –Javascript - Patterns

WORD TELLER

See also Challenge alternative & variation

submit

Text to be broken into words goes here.

After submit is clicked, a series of alert( )'s

announces the individual words in the text – until

final alert( ) says 'DONE'

Javascript implementation must bebased solely on search/replace/matchfunctions & suitable control structure.

var more = true

if (pattern found) {... }else {...

more=false}

while (more){

}

Tools - while-loop control

Loop around…identifying word pattern matches -

removing them from the string - until the entire input string

has been processed

s.search (p)

s.replace(p, subst)

s.match (p)

Tools - search & pattern matching functions

Returns location of 1st match for pattern p

- returns -1 if no match

Returns an array related to the matched pattern

- see next slide

Replaces the 1st match with subst

- but must store updated string s

- else effect is transitory !

Tools - match & replace functions

var x = s.match(p)

if ( x ) { … }

x[0]

y = s.replace(p, subst)

Replaces 1st occurrence of pattern p with string

subst – You must store to remember the change.

If no matches, then x is null and acts like false

If there are matches, then x[0] is first match

x[1]… etc are related to partial pieces of match

- viz., pattern parts enclosed in ( )'s in the

pattern p

Returns in x an array related to matched

pattern

References & notes:

Sebesta: p. 159-168 - on patterns p. 136 etc - for remarks on control statements

Understanding the search/match/replace functions described herein is key point.

Class web-site has link to directory of Javascript examples – which are under the C-searchPatterns subdirectory. Refer to the JavaScript.doc Table of Contentsfor discussion of those examples.

For tutorials, see: www. w3schools.com/xml

Assignment #6 –alternative

TIC TAC TOE

OOO

XXX

XXX

OOO

Tic Tac Toe board looks like this.

Ensures don't move more than once in a cell – else warns.

If click on cell, then next players move displayed there.

Does not have to detect win.

Doing the TicTacToe script requires understanding the parent-child-grandchild relations that occur in the DOM andThe syntax for working with the DOM in Javascript.

element e

element's child ee = e.firstChild

element's grandchild eee = ee.firstChild

Html tag

Tag within tag

data within that

Different attributes [background color, font size, actual text]may correspond to successive children in DOM tree.

Assignment #6 – variation

Image Extractor – Table Fabricator

See asgt03 on web site for basic part

submit

Textarea for depositing an HTML page.

Frame-1 Frame-2

Image name Image hyper-link

us.gif <a href="us.gif">us</a>

can.tif <a href="can.gif">can</a>

rainbow.jpg <a href="rainbow.jpg">rainbow</a>

All html references to imagesin textarea, are extracted tocompose entries in a tableof images

All references to an imagein the textarea, areextracted to composeentries in a table of images

Hyperlinks are fabricated by-along with the table tags &the image names from the HTML page

Extraction basedon patterns & fabrication using Javascript

Assignment #7 – Simple JSP Problem

Table times

Due Thursday after the breakRequires Tomcat set up on your own machine Show jsp page & code – document as usual

Requires some elaboration of the JSP in: myjsp/chapter01/newexp02.jsp

Number of hrsleft in day

Number of secondsleft in minute

Number of minutesleft in hour

If current time is: 5 minutes and 3 seconds after 6 o'clock in the evening

5 54 57

Use JSP to get the current time of day; then calculate & output table like shown: