Copyright Penny McIntire, 2007 Things to Do with JavaScript.

copyright Penny McIntire, 2007

Things to Do with JavaScript

2


Things to Do with JavaScript• Auto email with reset confirm• Auto email with data validation a

nd autofocus• Rename a button• Change background color• View URL• Set timer • Open a window

3


Things to Do with JavaScript• Display date• Print page• Save and access a cookie• Sniff the browser• Data validation • Preload images• FlyoutDropdown menus

4


Auto Email• You can create an html form, then

automatically email the data captured from the form…

JSAutoEmail.html

<html><head><title>Autoemail</title><script language="JavaScript"> function allowReset() { return window.confirm(“Clear the form?") }</script></head>

<body><form method=post action="mailto:[email protected]?

subject=Prospective Customer&body=Some standard message could go here"

onReset="return allowReset()" enctype = "text/plain">

<p>Enter your first name:</p> <input type="text" name="firstName" value = "Penny"><p> Enter your last name: <input type="text" name="lastName" value = "McIntire"><p> <input type="radio" name="gender" value = "male" checked>Male <input type="radio" name="gender" value = "female">Female <p> <input type="checkbox" name="retired">I am retired<p> <input type="reset"> <input type="submit" value = "Submit this now!"></form></body></html>

action = “mailto:…

Executes the function allowReset to double check.

7


Auto Email• This confirms the reset before

clearing the form. • If the function returns true, it

resets.• If the function returns false, it does

not. • onSubmit works the same way, to

interrupt the process before sending the form to the server.

8


Auto Email• “Secret” email should never be

used, and, in fact, modern versions of browsers don’t allow secret email; a window is displayed asking user permission.

• There seems to be an upper limit of 2044 characters for the content of an auto email.

9


Auto Email with Editing and Autofocus

• Now let’s simplify the email part and check for empty fields as well as autofocus on appropriate fields…

JSAutoEmail2.html

<html><head><title>Auto Email with Editing and Autofocus</title>

<script language="JavaScript">function submitForm() { if (document.loginForm.firstName.value == "" && document.loginForm.lastName.value == "") {

alert( "Please enter your first and last names"); document.loginForm.firstName.focus(); return false;

} else if(document.loginForm.firstName.value == "") { alert( "Please enter your first name"); document.loginForm.firstName.focus(); return false;

} else if(document.loginForm.lastName.value == "") { alert( "Please enter your last name "); document.loginForm.lastName.focus(); return false;

} else { return true;

}} </script></head>

“Return false;” aborts the “submit” part of autosubmit.“Return true;”

submits the email.

Sets focus on empty

field.

<body onLoad="document.loginForm.firstName.focus();">

<h1>Auto Email with Editing and Autofocus</h1><form name="loginForm" method=post

action="mailto:[email protected]" enctype = "text/plain" onSubmit="return

submitForm()"> <p>Enter your first name:

<input type="text" name="firstName"></p> <p>Enter your last name:

<input type="text" name="lastName"></p> <input type="submit"></p></form></body></html>

onSubmit captures the submit and sends it to the function. A false return aborts the autoemail.

Sets focus on first field, when page

opens.

12


Rename a Button

JSRenameButton .html

<html><head>

<script language = "JavaScript">function getButtonName(){ var newName = prompt("Rename the button, please") document.myForm.myButton.value=newName}</script></head>

<body><form name = "myForm"> <input type = "button" name = "myButton" value = “Click to rename me"

onClick="getButtonName()"></form>

</body></html>

Tracing through the DOM

Replaces the old value with the new one.

Sets up the button.

14


Change Background Color

JSChangeBackground.html

<html><head><script language = "JavaScript">

function newBackColor(color) { if (color == 1) {document.bgColor="red"} if (color == 2) {document.bgColor="green"} if (color == 3) {document.bgColor="blue"}

}</script></head>

<body><h1>We love color!</h1><form> To change the background color, click on a button below:<br><br> <input type = "button" value = "red" onClick = "newBackColor(1)"> <input type = "button" value = "green" onClick = "newBackColor(2)"> <input type = "button" value = "blue" onClick = "newBackColor(3)"></form></body></html>

Changes the document property “bgColor”

16


View URL

JSViewURL.html


function getURL (){

alert(“You are in document: " + document.location)}

</script></head>

<body><h1>We love URLs!</h1><form> To find out your current URL:<br><br> <input type = "button" value = "Show Me URL" onClick = “getURL()"></form></body></html>

18


Timer

JSTimer.html


var myTimer function launchTimer() {

myTimer = setTimeout("alert('Sorry, your time is up!')",5000) }</script></head>

<body><h1>You must do something on this page within 5 seconds!</h1><script language = "JavaScript">launchTimer()</script>

<form name = "myForm"><input type = "button" value = “Press me to stop timer!"

onClick = “clearTimeout(myTimer)”</form></html>

5000 x 1/1000 of a second

JavaScript method

Or, <body onload="launchTimer() ">

What to do when timer fires

20


Open a Window

JSOpenNewWindow.html

<html><head><script language = "JavaScript">function myNewWindow() { window.open("http://www.niu.edu",

"newWindow", "height=100,width=100,status=yes");

newWindow.focus(); }</script></head><body><h1>Open New Window</h1><form name = "myForm"> <input type = "button" value = "Open Window"

onClick = "myNewWindow()"></form></html>

(“URL”, “window name”, “parameters”)

See page 885 of DHTML.

22


Display Date

JSDisplayDate.html

<html><head>

<script language = "JavaScript">

var myDate = new Date();

var myDay=myDate.getDate(), //day number in month

myDayOfWeek=myDate.getDay(), //day number in week

myMonth=myDate.getMonth(), //month number

myYear=myDate.getFullYear(); //year number

switch (myDayOfWeek) {

case 0: dayName = "Sunday"; break;

case 1: dayName = "Monday"; break;

case 2: dayName = "Tuesday"; break;

case 3: dayName = "Wednesday"; break;

case 4: dayName = "Thursday"; break;

case 5: dayName = "Friday"; break;

default: dayName = "Saturday"; break;

}

If “new Date” with no constructors, it gets

today’s date.

getYear method is unpredictable in earlier browsers because of Y2K

switch (myMonth) { case 0: monthName = "January"; break; case 1: monthName = "Februrary"; break; case 2: monthName = "March"; break; case 3: monthName = "April"; break; case 4: monthName = "May"; break; case 5: monthName = "June"; break; case 6: monthName = "July"; break; case 7: monthName = "August"; break; case 8: monthName = "September"; break; case 9: monthName = "October"; break; case 10: monthName = "November"; break; default: monthName = "December";}</script></head>

<body><script language = "JavaScript"> document.writeln("The system date looks like this..." + myDate +"<br>") document.writeln("Today's date is: " +

dayName + ", " + monthName + " " + myDay + ", " + myYear + "<br>")</script></body></html>

26


Printing a Page• To print a page…<a href="#"

onClick="window.print();">Print this page

</a>

27


Cookies• As your web application executes,

and perhaps links from page to page, it can be important to keep track of various pieces of information.

• For instance, a user might log in on the first page, and you might want to display that user’s name on a page he or she links to later.

28


Cookies• Traditional (non-web) applications

have no trouble with this “keeping state” or handling “persistence” – they aren’t hopping from page to independent page, and even if they were, they would simply write important data out to disk.

29


Cookies• It’s not so easy with web

applications.– Each document is independent and

can’t easily communicate with another document.

– “Writing out to disk” means hitting the server, which is time consuming, and it might mean storing thousands of entries on the server per day, which eats up disk space rapidly.

30


Cookies• So, we have cookies.• Think of them as special, hidden

cookie jars, kept on the client, in which the client or the server can drop tidbits of information for later retrieval.

• Examples of cookie use:– When a web site remembers your

name or password. – When a shopping cart remembers

what you have already chosen as you browse from page to page.

31


Cookies• There are some limitations to

cookies:– A web browser can retain a maximum

of only 300 cookies.– Only 20 may be “owned” by a given

domain (i.e., cs.niu.edu could store only 20 cookies on your machine).

– Each cookie must be under 4K in length, 2K for older browsers.

32


Cookies• You can open your cookies file…

– In IE, under Temporary Internet Files

33


Cookies• Cookies store:

– The domain name that created the cookie.

– Whether the server or JavaScript within the browser stored the cookie.

– Whether or not the cookie should be transported using SSL.

– The expiration date. – The name and value pair that you

want to store in the cookie…

34


Cookies– For instance, if you want to save the

user’s first name, you might have a name/value pair like firstName= Penny.

35


Cookies• The format of the string used to

set a cookie is as follows:document.cookie =

‘myNewCookie=value you have assigned’ + ‘expires=Friday, 30-Mar-2001 23:59:59 GMT;’

– This leaves a cookie with the name myNewCookie, with the value “value you have assigned”, which expires on March 30 at 1 second before midnight.

– Let’s look at the individual parts here…

36


Cookies• ‘myNewCookie=value you have

assigned’‘name=value you have assigned’ – The value part is required.– No semicolons, commas, or blanks in the

whole “name” part, OR • Encode the value part of the pair with the

JavaScript escape() function to take care of any special characters.

• Use the unescape() function later, when retrieving the cookie, to get back to the original characters.

– If two cookies have the same name, the new one overwrites the old one.

37


Cookies• ‘expires=Friday, 30-Mar-2001

23:59:59 GMT;’ – Can use the JavaScript Date object

format shown here, or use a calculation for the date and time in milliseconds since January 1, 1970, GMT.

– If this is omitted, the cookie expires automatically at the end of the session.

38


Saving a Cookie• Example and code from W3C: http://www.w3schools.com/JS/

js_cookies.asp

39


Sniffing the Browser and Version

• There are lots of scripts floating around to check for the browser type and version.

• If you check this, you can write completely different versions of the page for the different browsers.

• But, is this a good thing???– A maintenance nightmare to avoid

whenever possible.

40



• If you really must include something for a particular browser, if might be better to have just a single document, with small areas that check for the browser, rather than having two completely different pages.

41



• Can instead check to see if a particular feature that you’re using is supported – less of a maintenance problem.

• Example:if (document.layers) //Navigator <6.0

• In any case, there is code out there that you can download to do the sniffing. – Check www.thejavascriptsource.com .

42


Data Validation• “Your task is to anticipate every

possible entry that users could make and let through only those your scripts can use.” Danny Goodman

• Also, use checkboxes and radio buttons whenever possible, to ensure that invalid data entry doesn’t occur.

43


Data Validation• Verifying just before the form is

submitted:– Use the onSubmit = event on the form

to execute a function that does final validation.

• Example: checking if a field is all digits…

function isDigits(inString){ if(inString.value.length == 0)

return false;

for(i=0; i < inString.length ; i++) { char = inString.substring(i, i+1);

if (char > "9" || char < "0") return false; } return true;}

45


Preloading Images• Preload images

– When a user mousesover a button for the first time, the mouseover effect could take a while to show up if it has to wait for the image to download.

– As an alternative, download all of the images for the page when the page itself downloads, so they are all ready and waiting.

– Code for this is automatically done by Dreamweaver unless you deliberately tell it not to add the code…

46


Preloading Imagesfunction MM_preloadImages()

• Good luck understanding Dreamweaver’s code. Nonetheless, it works.

• Essentially, onLoad in the <body> calls the function to reference each image that doesn’t appear on the original page (like rollover images), which forces a download of the image right then, instead of waiting until the user mouseovers.

47


Flyout/Drop Down Menus• Two easy (?) ways to do this:

– Go to The JavaScript Source and copy in one of their cross-browser scripts.

– Use Dreamweaver’s Show/Hide Layers; i.e., create semi-manually.

– Use Dreamweaver Window > Behaviors to create automatically. • Fairly reliable in last couple of versions?• Still need to tweak the CSS so that the

dropdowns fit with the look of your page.

48


Resources• http://www.damienmjones.com/wo

rk/obfuscator.htm email address obfuscator, so that spammers can’t harvest email addresses from mailto: links.

• http://news.yahoo.com/rss/ Example of how RSS can be used.

Copyright Penny McIntire, 2007 Things to Do with JavaScript.

Documents

Transcript of Copyright Penny McIntire, 2007 Things to Do with JavaScript.