1. copyright Penny McIntire, 2007 Things to Do with JavaScript

2. 2 copyright Penny McIntire, 2007 Things to Do with JavaScript Auto email with reset confirm Auto email with data validation and autofocusAuto email with data validation and autofocus Rename a button Change background color View URL Set timer Open a window

3. 3 copyright Penny McIntire, 2007 Things to Do with JavaScript Display date Print page Save and access a cookie Sniff the browser Data validation Preload images FlyoutDropdown menus

4. 4 copyright Penny McIntire, 2007 Auto Email You can create an html form, then automatically email the data captured from the form… JSAutoEmail.html

5. Autoemail function allowReset() { return window.confirm(Clear the form?") }

6. <form method=post action="mailto:pmcintire@niu.edu?subject=Prospective Customer& body=Some standard message could go here" onReset="return allowReset()" enctype = "text/plain"> Enter your first name: Enter your last name: <input type="radio" name="gender" value = "male" checked>Male Female I am retired action = mailto:… Executes the function allowReset to double check.

7. 7 copyright Penny McIntire, 2007 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. 8 copyright Penny McIntire, 2007 Auto Email Secret email should never be used, and, in fact, modern versions of browsers dont 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. 9 copyright Penny McIntire, 2007 Auto Email with Editing and Autofocus Now lets simplify the email part and check for empty fields as well as autofocus on appropriate fields… JSAutoEmail2.html

10. Auto Email with Editing and Autofocus 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; } Return false; aborts the submit part of autosubmit. Return true; submits the email. Sets focus on empty field.

11. Auto Email with Editing and Autofocus <form name="loginForm" method=post action="mailto:pmcintire@niu.edu" enctype = "text/plain" onSubmit="return submitForm()"> Enter your first name: Enter your last name: 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. 12 copyright Penny McIntire, 2007 Rename a Button JSRenameButton.html

13. function getButtonName() { var newName = prompt("Rename the button, please") document.myForm.myButton.value=newName } <input type = "button" name = "myButton" value = Click to rename me" onClick="getButtonName()"> Tracing through the DOM Replaces the old value with the new one. Sets up the button.

14. 14 copyright Penny McIntire, 2007 Change Background Color JSChangeBackground.html

15. function newBackColor(color) { if (color == 1) {document.bgColor="red"} if (color == 2) {document.bgColor="green"} if (color == 3) {document.bgColor="blue"} } We love color! To change the background color, click on a button below: Changes the document property bgColor

16. 16 copyright Penny McIntire, 2007 View URL JSViewURL.html

17. function getURL () { alert(You are in document: " + document.location) } We love URLs! To find out your current URL: <input type = "button" value = "Show Me URL" onClick = getURL()">

18. 18 copyright Penny McIntire, 2007 Timer JSTimer.html

19. var myTimer function launchTimer() { myTimer = setTimeout("alert('Sorry, your time is up!')",5000) } You must do something on this page within 5 seconds! launchTimer() <input type = "button" value = Press me to stop timer!" onClick = clearTimeout(myTimer) 5000 x 1/1000 of a second JavaScript method Or, What to do when timer fires

20. 20 copyright Penny McIntire, 2007 Open a Window JSOpenNewWindow.html

21. function myNewWindow() { window.open("http://www.niu.edu", "newWindow", "height=100,width=100,status=yes"); newWindow.focus(); } Open New Window <input type = "button" value = "Open Window" onClick = "myNewWindow()"> (URL, window name, parameters) See page 885 of DHTML.

22. 22 copyright Penny McIntire, 2007 Display Date JSDisplayDate.html

23. 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 todays date. getYear method is unpredictable in earlier browsers because of Y2K

24. 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"; }

25. document.writeln("The system date looks like this..." + myDate +" ") document.writeln("Today's date is: " + dayName + ", " + monthName + " " + myDay + ", " + myYear + " ")

26. 26 copyright Penny McIntire, 2007 Printing a Page To print a page… <a href="#" onClick="window.print();"> Print this page

27. 27 copyright Penny McIntire, 2007 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 users name on a page he or she links to later.

28. 28 copyright Penny McIntire, 2007 Cookies Traditional (non-web) applications have no trouble with this keeping state or handling persistence – they arent hopping from page to independent page, and even if they were, they would simply write important data out to disk.

29. 29 copyright Penny McIntire, 2007 Cookies Its not so easy with web applications. –Each document is independent and cant 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. 30 copyright Penny McIntire, 2007 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. 31 copyright Penny McIntire, 2007 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. 32 copyright Penny McIntire, 2007 Cookies You can open your cookies file… –In IE, under Temporary Internet Files

33. 33 copyright Penny McIntire, 2007 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. 34 copyright Penny McIntire, 2007 Cookies –For instance, if you want to save the users first name, you might have a name/value pair like firstName= Penny.

35. 35 copyright Penny McIntire, 2007 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. –Lets look at the individual parts here…

36. 36 copyright Penny McIntire, 2007 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. 37 copyright Penny McIntire, 2007 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. 38 copyright Penny McIntire, 2007 Saving a Cookie Example and code from W3C: http://www.w3schools.com/JS/js_cookies. asp

39. 39 copyright Penny McIntire, 2007 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. 40 copyright Penny McIntire, 2007 Sniffing the Browser and Version 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. 41 copyright Penny McIntire, 2007 Sniffing the Browser and Version Can instead check to see if a particular feature that youre 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.www.thejavascriptsource.com

42. 42 copyright Penny McIntire, 2007 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 doesnt occur.

43. 43 copyright Penny McIntire, 2007 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…

44. 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. 45 copyright Penny McIntire, 2007 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. 46 copyright Penny McIntire, 2007 Preloading Images function MM_preloadImages() Good luck understanding Dreamweavers code. Nonetheless, it works. Essentially, onLoad in the calls the function to reference each image that doesnt 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. 47 copyright Penny McIntire, 2007 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 Dreamweavers 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. 48 copyright Penny McIntire, 2007 Resources http://www.damienmjones.com/work/o bfuscator.htm email address obfuscator, so that spammers cant harvest email addresses from mailto: links.http://www.damienmjones.com/work/o bfuscator.htm http://news.yahoo.com/rss/ Example of how RSS can be used.http://news.yahoo.com/rss/