Old Business https://jshare.johnshopkins/kchurch4/public_html/teaching/103/Spring2011 /

1. Old Businesshttps://jshare.johnshopkins.edu/kchurch4/public_html/teaching/103/Spring2011/ • Note: We rarely write HTML by hand • Many programs offer an HTML option to “save as” • Microsoft: Word, Powerpoint, Outlook • Apple: TextEdit

2. Embedding (Viral Marketing)

3. New Business:Web Programming Homework • Add a survey to your home page • Provide a submit button that emails survey results to you • Hint: mailto:Kenneth.Church@jhu.edu?subject=just+testing&body=this+is+a+test • But please email results to you (and not to me) • Suggestions: • Use forms with several types of inputs • Menus, buttons, check boxes, textareas • Provide “like” and “don’t like” features, tags, etc. • Update your home page and email us with link by dawn before next class • Please check out one another’s home pages • And fill out their surveys…

4. We will focus on simple JavaScript examples,but JavaScript needn’t be simplehttp://www.howtocreate.co.uk/tutorials/jsexamples/solitaire.htmlhttp://www.freegames.uk.eu.org • Extra Credit: • Add a solitaire game to your home page • Hint: http://www.howtocreate.co.uk/tutorials/jsexamples/solitaire.html#creating

5. URLs with Arguments • URL (aka link) • Domain: www.google.com • Arguments: hl, q, subject, body • Examples: • http://www.google.com/#hl=en&q=aardvark • http://maps.google.com/maps?hl=en&q=Baltimore • mailto:Kenneth.Church@jhu.edu?subject=just+testing&body=this+is+a+test • JavaScript Security Model makes it difficult to pass information back from client to server • We’ll use mailto links to get around that • Better alternatives: cgi bin (Unix), .Net (Microsoft) • Nice tutorial: http://www.cs.tut.fi/~jkorpela/forms/cgic.html • But too advanced for now… We can return to this later (if you want to)

6. javascript_example.htmlhttp://www.howtocreate.co.uk/tutorials/jsexamples/testingRoll.htmljavascript_example.htmlhttp://www.howtocreate.co.uk/tutorials/jsexamples/testingRoll.html

7. javascript_example_with_sounds.html

8. factorial_example.html • Example of a form • One Input: x • Two Outputs (both produce the same result) • Recursive definition of factorial • Iterative definition of factorial • Three Buttons: • Update button: calls fact(x) and updates as necessary • Next: calls fact(x+1) and updates as necessary • Back: calls fact(x−1) and updates as necessary • Take-away points • Illustrate forms: inputs, outputs, menus… • Illustrate JavaScript functions (with multiple arguments) • Code Re-use: Note that all 3 buttons call the same update function • Illustrate recursion (and compare with iteration) • Illustrate function calling, local variables and alpha/beta reduction

9. Lots of Different Input Types (with state)http://www.howtocreate.co.uk/tutorials/jsexamples/saveForm.html

10. form_example.html • Different types of input boxes, menus, buttons, etc. • http://www.w3schools.com/html/html_forms.asp • Email values back (to workaround security) • mailto:Kenneth.Church@jhu.edu?subject=just+testing&body=this+is+a+test

11. Limitations Due to Security • JavaScript security model • JavaScript has its own security model, • but this is not designed to protect the Web site owner or the data passed between the browser and the server. • Security model: designed to protect user from malicious Web sites, • and as a result, it enforces strict limits on what the page author is allowed to do. • Challenge: Can we protect the user (innocent good guy) • If a bad guy (page author) is running code on good guy’s machine? • Prohibitions: bad guy can’t read or write secrets (e.g., user’s files) • But bad guy can trick user into clicking on links and handing over secrets • Menus can switch “yes” and “no” (and “cancel”) • Phishing • JavaScript can call URLs with arguments and those URLs need not play by the rules • http://www.badguy.net/gossip?secret=xyz

12. (Too) Advanced Topics • Despite the security model, you can still do some pretty amazing (advanced) things… • Please don’t be intimidated… • The rest of this lecture is extra credit

13. Sketch of http://www.badguy.net/gossip?secret=xyz(http://www.cs.tut.fi/~jkorpela/forms/cgic.html)

14. Image Mapshttp://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap

15. More (Too) Advanced Examples • http://www.howtocreate.co.uk/jslibs/ • http://www.howtocreate.co.uk/tutorials/javascript/