old business
DESCRIPTION
Old Business https://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. Embedding (Viral Marketing). - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/1.jpg)
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
![Page 2: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/2.jpg)
Embedding (Viral Marketing)
![Page 3: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/3.jpg)
New Business:Web Programming Homework
• Add a survey to your home page– Provide a submit button that emails survey results to you
• Hint: mailto:[email protected]?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…
![Page 4: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/4.jpg)
We will focus on simple JavaScript examples,but JavaScript needn’t be simple
http://www.howtocreate.co.uk/tutorials/jsexamples/solitaire.html http://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
![Page 5: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/5.jpg)
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:[email protected]?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)
![Page 6: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/6.jpg)
javascript_example.htmlhttp://www.howtocreate.co.uk/tutorials/jsexamples/testingRoll.html
![Page 7: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/7.jpg)
javascript_example_with_sounds.html
![Page 8: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/8.jpg)
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
![Page 9: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/9.jpg)
Lots of Different Input Types (with state)http://www.howtocreate.co.uk/tutorials/jsexamples/saveForm.html
![Page 10: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/10.jpg)
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:[email protected]?subject=just+testing&body=this+is+a+test
![Page 11: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/11.jpg)
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
![Page 12: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/12.jpg)
(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
![Page 13: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/13.jpg)
Sketch of http://www.badguy.net/gossip?secret=xyz (http://www.cs.tut.fi/~jkorpela/forms/cgic.html)
![Page 14: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/14.jpg)
Image Mapshttp://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap
![Page 15: Old Business](https://reader036.vdocuments.mx/reader036/viewer/2022062410/568161f7550346895dd223cc/html5/thumbnails/15.jpg)
More (Too) Advanced Examples
• http://www.howtocreate.co.uk/jslibs/• http://www.howtocreate.co.uk/tutorials/javascript/