1. Creating Web Documents: JavaScript Ftp / file management: review Introduction to JavaScript Sources Homework: start review for midterm, work on Project II, start reading about JavaScript in HTML text

2. Uploading using ws_ftp Use ws_ftp command mkdir to construct directories for each of your projects: project1, project2, project3. Double click so the project1 directory is what is shown on the right. Upload your project1 files to this directory. Rename the html file to index.htm. Repeat for project2 and project3

3. File management It may be appropriate to have a more complex structure than a single directory/folder for a Web site. You can still use relative addressing (that is, not absolute addressing with http://) –src="/models/heart.jpg" –href="../biblio.htm" biblio.htm in parent folder –href="../project1/notes.htm" heart.jpg in subfolder models notes.htm in subfolder of parent folder

4. JavaScript Scripting language used in browsers: not ‘full’ programming language. Becoming more standardized, but still discrepancies between versions. Provides some computation, manipulation of display, customization (Repeat commercial for follow-on courses: Creating Dynamic Web Documents & Creating Databases for the Web)

5. Location of JavaScript Mostly in the head section of HTML file, use script tags and then enclose in comments <!-- document.write("Hello World!"); //--> Some JavaScript would be in the body, generally inside or tags. These are often calls to functions.

6. External JavaScript Write one set of JavaScript functions and use in many HTML pages

7. Elements of JavaScript Typical programming elements: –variables, operators, expressions, statements, definition of functions Connection to Web –built-in functions (e.g., Date()) –Document Object Model = names of ‘things’, properties, methods (e.g., document.write) –events (e.g., onSubmit, onMouseOver)

8. Variable … is something that holds a value, a value being a string of characters, a number, a set of things (such as strings or numbers). Examples: –5 –2.50 –"Purchase College" –"bird.gif"

9. Statements Programs ‘flow’ from statement to statement Simple statements –Assignment (setting the value of a variable) –calls to procedures Certain statements are compound statements, with the statements ‘inside’ operating depending on certain rules –Loops, conditionals (If, switch) Punctuation (brackets, semicolons) can be tricky!

10. Exercises Start NotePad and copy the following examples (you can keep adding code). Save as js.html. Open in Netscape.

11. Example JavaScript 1 document.write(" This is it. "); document.write(Date()); This is the rest of the page.

12. Modified example JavaScript 1 var s = "Hello "; document.write(s); document.write(Date()); document.write(" " + s + " "); This is the rest of the page.

13. Recap of example JavaScript code in the head section (NOT within a function definition--example of this later in notes). This gets executed (done, performed) before anything else. document.write(something) puts the something at the start of the html page. Try other possibilities: document.write(" hello ");

14. Using built-in functions, variables JavaScript 1 <!-- var rawDate = Date(); var mon = rawDate.substr(4,3); document.write("The month is "); document.write(mon); //--> This is the rest of the page. Variable set to what Date() returns. Extract the month.

15. Set event handler to set status bar JavaScript 1 This is the rest of the page. <a href="http://rachel.ns.purchase.edu/~kpiastro/project1" onMouseOver="status= 'This is where our stuff will be'; return true;" > Kristina's page Note single quotes inside double quotes This lets the hyperlink take place. This is an event.

16. JavaScript 1 This is the rest of the page. <a href="http://rachel.ns.purchase.edu/~kpiastro/project1" onMouseOver="status= 'This is where our stuff will be'; return true;" onMouseOut="status='Good bye';return true;" > Kristina's page

17. if test The if statement allows you/the code to check a condition and if the condition is true, do something and if the condition is not true, do something else (or do nothing) if (condition) { any number of statements} else { any number of statements}

18. 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

19. 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; }

20. Address Information <form method=post enctype="text/plain" action="mailto:jeanine.meyer@purchase.edu" 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

21. Learning to fish…. Many on-line sites with examples of JavaScript You do need to review what you find (you don't want to eat anything you hook….) Go to google.com and put in: JavaScript Date Time –Create an example that displays: "Class is nearly over" when the time is past 1pm.

22. Sources Textbook www.webmonkey.com Go to google (search site) and put in JavaScript Tutorial for many tutorials Use View to see HTML source

23. Homework I have posted a mid-term study guide under Course Documents. Prepare for midterm: –basic HTML tags –vocabulary / concept list –questions (relating to postings, discussion) Work on Project II.