1 / 18

B118 Web Programming

B118 Web Programming. Session #5 Client-Side Applications with JavaScript March 1, 2004. Tonight’s Agenda. Administrative Introduction to JavaScript Quiz. Administrative. Resume homework results Chapter 4 quiz results Term project Individual presentation.

kalyca
Télécharger la présentation

B118 Web Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. B118 Web Programming Session #5 Client-Side Applications with JavaScript March 1, 2004

  2. Tonight’s Agenda • Administrative • Introduction to JavaScript • Quiz

  3. Administrative • Resume homework results • Chapter 4 quiz results • Term project • Individual presentation

  4. Administrative – Resume Grading Scheme • Basic Stuff • strong/bold • list element • meta • table, table width • center, hyperlinks • Basic Enhancements • headers, italic • title, horizontal line • paragraph alignment • table alignment • nested tables, • advanced hyperlinks • Advanced Enhancements • font size or style sheet • graphics or color attribute • colspan/rowspan • list type attributes • mailto • image hyperlinks

  5. Administrative – Individual Presentation • Topic assignment tonight! • ASP.NET • Web Services • XML • Details on course calendar link

  6. Administrative – Individual Presentation (cont’d) • Presentation must address: • What is this technology? • Are there competing technologies or product offerings from other companies? If so, identify a few of them. • Why should a business (and your classmates) care about it? Also identify (a) two benefits that a company could receive from using this technology and (b) one benefit that a classmate could receive from being aware of this technology

  7. Administrative – Individual Presentation (cont’d) • Deliverables: • Oral presentation (3-5 minutes, graphical aids such as PowerPoint slides or illustrations are optional) • Written summary of your presentation that must include your responses to the topics listed above (word-processed, 10 or 12 point font, single or double-space, maximum of three pages). It must also include a bibliography of all the research sources you used. • The questions you asked of the other presenters in your group and the answers that you received (one question and answer per presentation)

  8. JavaScript and HTML • An example of how it’s used and why • No mailto:wong_r@cob.sjsu.edu in the HTML! <SCRIPT language="JavaScript"> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- http://javascript.internet.com/page-details/email-protector.html --> <!-- Begin user = "wong_r"; site = "cob.sjsu.edu"; document.write('<a href=\"mailto:' + user + '@' + site + '\">'); document.write(user + '@' + site + '</a>'); // End --> </SCRIPT>

  9. Pseudo Code Exercise • Pseudo Code Toolbox contents: • Print • If/Then/Else • DoWhile • For • In the next 10 minutes, write the pseudo code to generate this output • There’s a solution that’ll get you full credit and one that’s only partial-credit

  10. JavaScript Solution <html><head><title>loop me</title> <script type="text/javascript" language="javascript"> <!-- for (i=5;i>1;i--){ document.write(i + " cans of Mountain Dew on the wall.<br>"); document.write("You take one down, pour a round.<br>"); } document.write("<br>There is only one can of Mountain Dew left.<br>"); document.write("<h1>Now stop drinking all my Dew!</h1>"); //--> </script> </head> </body> </html>

  11. JavaScript Exercise #1 • Toolbox contents: • window.prompt(“TextString”,””) • if (variabletest “condition”) { } else {} • Test can be ==, <, >, <=, >= • document.write(“TextString”) • Assignment: complete the JavaScript fragment <html><head><title>prompt me</title> <script type="text/javascript" language="javascript"> <!-- var yourSpecies = window.prompt("",""); if (yourSpecies ; }else{ ; } //--> </script> </head> </body> </html> Pseudo Code: yourSpecies = PromptUser("Are you human or alien?") Case(yourSpecies) human: Print("Greetings Earthling.") default: Print ("Nanu nanu. Kaplagh!") EndCase

  12. JavaScript Exercise #1 Solution <html><head><title>prompt me</title> <script type="text/javascript" language="javascript"> <!-- var yourSpecies = window.prompt("Are you human or alien?",""); if (yourSpecies == "human"){ document.write("Greetings Earthling.<BR>"); }else{ document.write("Nanu nanu. Kaplagh!<BR>"); } //--> </script> </head> </body> </html>

  13. JavaScript Exercise #2 • Modify the Mountain Dew JavaScript to prompt for the number of cans on the wall <html><head><title>loop me</title> <script type="text/javascript" language="javascript"> <!-- for (i=5;i>1;i--){ document.write(i + " cans of Mountain Dew on the wall.<br>"); document.write("You take one down, pour a round.<br>"); } document.write("<br>There is only one can of Mountain Dew left.<br>"); document.write("<h1>Now stop drinking all my Dew!</h1>"); //--> </script> </head> </body> </html>

  14. JavaScript Exercise #2 Solution <html><head><title>loop me</title> <script type="text/javascript" language="javascript"> <!-- var cans= window.prompt("How many cans of Mountain Dew?",""); for (i=cans;i>1;i--){ document.write(i + " bottles of Mountain Dew on the wall.<br>"); document.write("You take one down, pour a round.<br>"); } document.write("<br>There is only one bottle of Mountain Dew left.<br>"); document.write("<h1>Now stop drinking all my Dew!</h1>"); //--> </script> </head> </body> </html>

  15. JavaScript Exercise #3 • Creating a page to test JavaScript code • Toolbox contents • function runCode(){eval(document.formName.formElement.value);} • Value = “Run Code” to execute contents of formElement • <form name=“formName”> • <textarea name=“elementName” rows=? cols=?> • <input type=“button” onclick=“functionName;” value=“Run Code”>

  16. JavaScript Exercise #3 • Complete the JavaScript fragment <html><head><title>code testing page</title> <script type='text/javascript' language='javascript'> <!-- function runCode(){ eval(document. . .value); } //--> </script> </head> <h1>Experiment with JavaScript below</h1> <form > <p><textarea ></textarea> <br><br><input type="button" ></p> </form> </body> </html>

  17. JavaScript Exercise #3 Solution <html><head><title>code testing page</title> <script type='text/javascript' language='javascript'> <!-- function runCode(){ eval(document.codelab.codefield.value); } //--> </script> </head> <body bgcolor='white'> <h1>Experiment with JavaScript below</h1> <form name="codelab"> <p><textarea name="codefield" rows=4 cols=60></textarea> <br><br><input type="button" onclick="runCode();" value="Run Code"></p> </form> </body> </html>

  18. Midterm Preparation Exercises • From next week’s lecture notes (at the bottom): • 7.18, 7.26 • 8.11, 8.12, 8.16 • Needs material from chapters 10, 11, 12 of Lagerstrom

More Related