Creating Web Documents: JavaScript, continued Tool reports Creating new windows Form input verification Homework: read about JavaScript, start planning project 3.

Tool reports What did you like? When evaluating a tool: –Consider initial entry AND making changes. –Consider use on large and small projects.

Image links without borders

Document object model For JavaScript to refer to HTML document, need names for things… –Objects [new] windows HTML document –Methods (procedures that do something) –Events (event=something that happens. Your code specifies the action for ‘handling’ the event)

Image swap

Rollover test <!-- function movein(image) { window.document.picture1.src=image; } // End --> This is the start of the page.<a href="" onMouseOver="movein('Darcy3.jpg');" onClick="return false;" onMouseOut="movein('Liz-book.jpg');"> onMouseOver starts statement indicating what to do for that event. Need to give image a name Link doesn’t do anything

More on code Function movein defined in head section. onMouseOver and onMouseOut indicate two events. The statement –onMouseOver = "movein('Darcy3.jpg');" means when the MouseOver event happens, do this statement in quotes. –Note: the inner quotes around the image file name need to be single quotes or else????

Combine mouseovers & image maps <a href="" onMouseOver="movein('tvon1a.jpg');" onMouseOut="movein('tvoff.jpg');">

Verification of user data Recent example of bad interface design: –Butterfly ballot: permitted double (multiple) votes –Other ballots: no caution to voter: you did not pick a presidential candidate.

Calculation examples Go to newmedia.purchase.edu/~Jeanine –HTML/JavaScript examples –Or Explanation of code… is a word document explaining the three 3 examples that follow.

Form verification example Show in two parts: –a verify function written in the head section –the form itself, with the call to verify part of the onSubmit event handler

Form example function verify(f) { if (f.lname.value == null || f.address.value == null) { alert("Form needs a last name and an address"); return false; } if (f.lname.value == "" || f.address.value == "") { alert("Form needs a last name and an address"); return false; } return true; }

Address Information <form method=post enctype="text/plain" onSubmit="return verify(this);"> First Name: Last Name: Street Address: Town/City: State: New York New Jersey Connecticut Pennsylvania Status: Returning client New client Thank you

Creating new windows May want to create a new, small window as a result of site visitor indicating a choice in a menu. Window.open is the method that opens new windows. The parameters indicate the URL, name, and other properties such as height. selectedIndex is the property that indicates what was selected. Options is an array that refers to the different choices

JavaScript code for creating new window Will do this with three statements. First two set up (declare) variables and set their values. var sel = window.document.fx.choice.selectedIndex; var selurl = window.document.fx.choice.options[sel].value; window.open(selurl,'insert', 'HEIGHT=200,WIDTH=300,scrollbars=yes'); Note: fx and choice were my choices for names of the form and the select tag. sel and selurl were my choices for names for these variables. insert was my choice for the name of the window (not used here). Note: window, document, selectedIndex, options, value are components of the document object model for JavaScript.

Select test Application Form Selection will open up a small window with one of 4 sample html files. <select name="choice" size=1 OnChange="var sel = window.document.fx.choice.selectedIndex; var selurl = window.document.fx.choice.options[sel].value; window.open (selurl,'insert','HEIGHT=200,WIDTH=300,scrollbars=yes')"> fourth first second third

Cascading Style Sheets: preview way of specifying more elaborate formatting in uniform way: –across page / site / business (everyone uses the same external style sheet) Uneven implementation on browsers. May be replaced by XML and XSL

My First Stylesheet <!-- H1 { color: blue; font-size: 40px; font-family: times} h2 { color: red; font-size: 30px; font-family: arial} P { text-indent: 100px; background: yellow; font- family: times} p.intro {text-indent: 0px; background: blue; font- family: impact} p.side {text-indent: 500px; background:red; font- family: verdana; font-size:10px} Stylesheet Example Next level heading Amaze your friends! Squash your enemies! Intro paragraph This is an aside

Project III Include JavaScript to support some interaction with site visitor. Use of style sheets (Read in text. We will do more later.) Your choice of topic, but I must approve. You may chose to build on Project II (check with me). You may chose to work in teams. Announcement due as posting before next class. Respond to current event postings AND tools posting.