lecture 22 - university of massachusetts amherst6 university of massachusetts amherst • cmpsci 120...

1

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Lecture 22

Javascript


Announcements

Homework#7 now due 11/24 at noonReminder: beginning with Homework#7, Javascript assignments must besubmitted using a format describedin an attachment to HW#7I will post a HW#8 due 12/3; HW#9due 12/10; HW#10 (survey) due12/15

2


Announcements

Office Hours:Tuesday, November 2311:00 AM to 12:00 PM RA Office Hours -- 310 2:00 PM to 3:00 PM RA Office Hours -- 310

Wednesday, November 2411:00 AM to 12:00 PM Yariv Office Hours -- Dubois


Homework#7

Q2A requires a simple loop andasks for a conversion “table” in theform of a list; not an html tableQ2B asks you to use parseFloat()and while it is good practice, it isnot really neededWhat does parseFloat (parseInt)do?

3


Printing a table with JavaScript<html><head><title>Printing a Table </title>

</head><body><script type="text/javascript">document.write("<table><tr><th>Number</th><th>NumberSquared</th></tr>");

var tableEntry = 0;

for(tableEntry=0;tableEntry<=20;tableEntry=tableEntry+2){ var tableEntrySq = tableEntry*tableEntry;document.write("<tr><td>"+tableEntry+"</td><td>"+tableEntrySq+"</th></tr>");

}document.write("</table>"); </script> </body> </html>

Sets up table

<style type="text/css"> table,th,td{border:1px solid black;text-align:center;}</style>

CSS

Prints table entries

Closes table

Example

ListExample

Computes table entries


Project

Project#2Did not get all of them gradedHope to finish today, tomorrow

GradesOK, OK-, good, very good, excellentSee the commentsOK = satisfactory, but improve forfinal report(very) good, excellent =representative of what I am lookingfor in final report

4


Final Project -- Due 12/15 You should plan to have your final

project accesible at www-edlab.cs.umass.edu/~yourusername/index.html

Final Report (P#3)1. Summary2. Initial design (2-3 paragraphs)3. Revised design based on FG (2-3 paragraphs)4. Final Design (2-5 pages)

a)Audienceb)CSS/HTML design decisionsc) Javascript design

5. Accessibility (if relevant)6. Conclusions


Final Project GradingReport including P1⇒P2⇒P3 evolution 25 pts;HTML/CSS 45 pts; JavaScript 30 ptsHTML/CSS

Working websiteHome page + 5 total linked pages (inc. homepage)with link back to homepage, navigation, images, textConsistent layout, color, etc., browser compatibility,various subjective considerations

JavaScriptSimple popup(s), buttons, clock, welcome, day ofweek, etc. [5-15 max]Text box input, slide show [10-20 max]More complex JavaScript, jQuery[15-30 max]

Accessibility = 5-10 points EXTRA credit

5


Back to the DOM?The DOM defines the objects and properties of alldocument elements, and the methods (interface) toaccess them.


form Object

The Form object represents anHTML form.For each instance of an HTML<form> tag in a document, a Formobject is created.Forms are used to prompt usersfor input.The input data is normally postedto a server for processing.

6


form Object examples

W3C, W3C


HTML Forms and InputA form is an area that can contain formelements that allow the user to enterinformationE.g. text fields, textarea fields, drop-downmenus, radio buttons, checkboxes, etc.)

A form is defined with the <form> tag<form>.input elements.</form>

7


HTML Forms and InputThe most used form tag is the <input>tagThe type of input is specified with thetype attribute.text fields are used when you want theuser to type letters, numbers, etc. in aform.

<form>First name:<input type="text" name="firstname" /><br />Last name:<input type="text" name="lastname" /></form>

text fields

Input fieldsPassword fieldsTextarea


HTML Forms and InputRadio Buttons are used when you want the user toselect one of a limited number of choices.<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>

Checkboxes are used when you want the user toselect one or more options of a limited number ofchoices

<form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle"value="Airplane" />

</form>

Radio buttons

Checkboxes

Mixed Forms Q11.5

8


HTML Forms and InputAction Attribute and the Submit ButtonWhen the user clicks on the "Submit" button, thecontent of the form is sent to the server.The form's action attribute defines the name ofthe file to send the content to.The file defined in the action attribute usuallydoes something with the received input.<form name="input" action="html_form_submit.asp" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>

If you type somecharacters in the text fieldbelow, and click the"Submit" button, thebrowser will send yourinput to a page calledhtml_form_submit.asp.The page will show you thereceived input.


Examplescreate a simple drop-down box on an HTML page. Adrop-down box is a selectable list.Simple drop down box Another drop down box

draw a border with a caption around your dataFieldset around data

add a form to a page. The form contains two input fieldsand a submit buttonForm with input fields and a submit button

extended formsForm with checkboxes Form with radio buttons

how to send e-mail from a formSend e-mail from a forme-mail validation

9


document Object elements[ ]


Example<form name="formtest" >Please enter your name: <br><input type="text" size="50" name="user_name"><p>Please enter your phone: <br><input type="text" size="30" name="user_phone"><p><input type="button"value="show form data"onClick="showForm(this.form)";>

</form>

function showForm(myform) {NewWin=window.open('','','width=300,height=200');name_input="<b>Your name: " + myform.user_name.value

+ "</b><br>";NewWin.document.write(name_input);phone_input="<b>Your phone: " + myform.user_phone.value

+ "</b><br>";NewWin.document.write(phone_input);

10


Examplefunction display(){ var output=""; output+="First Name: "+document.aform.first.value; output+="\nLast Name: "+document.aform.last.value; output+="\nComments: "+document.aform.comments.value; output+="\nCheck box checked: "+document.aform.check.checked; output+="\nSelection box: "+document.aform.sel.value; alert(output); //document.aform.button1.value=output;}

<form name="aform">First Name:<br><input type="text" name="first" value="bob" onFocus="this.select()"><br>Last Name:<br><input type="text" name="last" value="smith"onFocus="this.select()" ><br>Comments:<br><textarea name="comments" rows="5" cols="100">text in text area</textarea><br>check box<input type="checkbox" name="check"><br>pick one<br><select name="sel"><option value="hw">homework<option value="quiz">quiz<option selected value="exam">exam</select><br><input type="button" value="click to display information"onClick="display()" name="button1"></form></body></html>


Pulldown<html><head><title>Drop-Down Menus</title><script language="JavaScript">

function schedule(f){if(f.menu1.selectedIndex == 0){// Could also say: document.form1.menu1.selectedIndexf.text1.value="PL100, Feb 3-7, 9am to 5pm, Room 2133, Dr. Baloney "// Could also say: document.form1.text1.value}if(f.menu1.selectedIndex == 1){f.text1.value="PL200 Feb 10-13 9am to 5pm, Room 209B, Ms. Eclectic";}if(f.menu1.selectedIndex == 2){f.text1.value="UX101 Mar 2-6 9am to 5pm, Room 209, Mr. Nerdly";}if(f.menu1.selectedIndex == 3){f.text1.value="SH201 Apr 10-13 9am to 5pm, Room 209B, Miss Bashing";}

}</script><body bgcolor=lightgreen><font face=arial ><b><form name="form1">Select a Course<br>

<select name="menu1" size="4" onChange="schedule(this.form)"><option name="choice1" value="Perl1">Intro to Perl</option><option name="choice2" value="Perl2">Advanced Perl</option><option name="choice3" value="Unix1">Intro to Unix</option><option name="choice4" value="Shell1">Shell

Programming</option></select><p>

<input type="text" name="text1" size=60 /></form></body></html>

11


Accessing images & creating rollovers

As with forms, images are accessible through"image object"image Object properties

Sequencing Images Q11.33Selecting an image Q11.34


Creating an image rollover effect

assigning a new image to the src property ofthe image each time the onMouseover eventhandler is fired inside an image link, wechange the image onMouseover.

<html><head><title>Preloading Images</title></head><h2> This Is Baby William</h2><script language="JavaScript">

if(document.images){var baby1=new Image(); // Preload an imagebaby1.src="baby1image.jpg";

}if (document.images){

var baby2=new Image(); // Preload an imagebaby2.src="baby2image.jpg";

}</script><body bgcolor="cornflowerblue"><a href="#" onMouseOver="document.willy.src=baby2.src;"

onMouseOut="document.willy.src=baby1.src;"><img name="willy"

src="baby1image.jpg"align="left"alt="baby" border=2 hspace="10"width="220" height="250">

</body></html>

Changing on a clickQ11-6

Q11.35

12


Preloading images load an image into cache before being used, so itappears instantaneously when neededgood for change of image in effects like rollover images andimage slideshows.

create an instance of the image object in the HEAD sectionof the page, and assigning the image we wish to preload toits src property

example:<head><script type="text/javascript"></script></head>

repeat this for every image you wish to preload.


jQuery is a JavaScript LibraryWhat is a library?

jQuery is a library of JavaScript Functions.a lightweight "write less, do more" library.greatly simplifies JavaScript programmingeasy to learn

jQuery

13


jQuery featuresHTML element selectionsHTML element manipulationCSS manipulationHTML event functionsJavaScript Effects and animationsHTML DOM traversal and modificationAJAXUtilities


Adding jQuery LibraryThe jQuery library is stored a singleJavaScript file, containing all the jQueryfunctions.It can be added to a web page with thefollowing mark-up:<head><script type="text/javascript"src="jquery.js"></script></head>

Please note that the <script> tagshould be inside the page's <head>section

14


Basic jQuery ExampleThe following example demonstrates the jQuery hide()function, hiding all <p> elements in an HTML document.

<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button>Click me</button></body></html>


jQuery SyntaxThe jQuery syntax is tailor made for selectingHTML elements and perform some action onthe element(s).Basic syntax is: $(selector).action()

A dollar sign to define jQueryA (selector) to "query (or find)" HTML elementsA jQuery action() to be performed on the element(s)

Examples:$(this).hide() - hides current element$("p").hide() - hides all paragraphs$("p.test").hide() - hides all paragraphs withclass="test"$("#test").hide() - hides the element withid="test"

15


The Document Ready FunctionA document.ready() function is used toprevent any jQuery code from runningbefore the document is finished loading(is ready).$(document).ready(function(){ // jQuery functions go here...});

examples of actions that can fail iffunctions are run before the documentis fully loaded:Trying to hide an element that doesn't existTrying to get the size of an image that is notloaded


Hiding - Sliding- Fading

jQuery fadeOut()Example

Hide explanationsExample

Slide panelExample

jQuery animate()ExampleExample

lecture 22 - university of massachusetts amherst6 university of massachusetts amherst • cmpsci 120...

Documents