Embed Size (px)
Citation preview
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
<a href="http://www.nytimes.com">
<img border=0 src="bird.gif">
</a>
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
Image swap<html> <head> <title> Rollover test </title><script language="JavaScript"><!--function movein(image){ window.document.picture1.src=image;}// End --> </script> </head><body>This is the start of the page.<a href=""
onMouseOver="movein('Darcy3.jpg');" onClick="return false;"onMouseOut="movein('Liz-book.jpg');"><img src="Liz-book.jpg" name="picture1" > </a></body></html>
onMouseOver starts statementindicating 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');"><img src="tvoff.jpg" name="picture1" usemap="#factmap"></a>
<map name="factmap"><area shape="rect" coords="70, 40, 142, 116" href="fm1.html" >
<area shape="rect" coords="150, 40, 250,100" href="fm2.html">
</map>
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
http://newmedia.purchase.edu/~Jeanine/jsexamples.html
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
<html><head><title>Form example </title><script language="JavaScript">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;
}</script> </head>
<body><h1> Address Information </h1> <br><form method=post enctype="text/plain" action="mailto:[email protected]"onSubmit="return verify(this);">
First Name: <input type="text" name="fname"> Last Name: <input type="text" name="lname"> <br>Street Address: <input type="text" name="address" size=30>Town/City: <input type="text" name="city"> State: <select name="state" size=1><option value="NY" selected> New York<option value="NJ"> New Jersey<option value="CT"> Connecticut<option value="PA"> Pennsylvania</select> <br>Status: <input type="radio" name="status" value="R"> Returning client<input type="radio" name="status" value="N"> New client<hr> Thank you <p><input type="submit" value="Send information">
</form> </body> </html>
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.
<html> <head><title>Select test </title> </head><body><h1>Application Form </h1><hr><form name="fx" >Selection will open up a small window with one of 4 sample
html files. <br><select name="choice" size=1OnChange="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')"><option value="jest4.htm"> fourth<option value="jest1.html" > first<option value="jest2.html"> second<option value="jest3.html"> third</select> <br></form> </body> </html>
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
<HTML><HEAD> <TITLE>My First Stylesheet</TITLE><STYLE TYPE="text/css"><!-- 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}</STYLE> </HEAD> <BODY><H1>Stylesheet Example </H1> <br><h2> Next level heading </h2><P>Amaze your friends! Squash your enemies!</P><p class="intro"> Intro paragraph<p class="Side"> This is an aside </p></BODY> </HTML>
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.
