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

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

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

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

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)

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">     </SCRIPT>

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

JavaScript Solution <html><head><title>loop me</title> <script type="text/javascript" language="javascript">  </script> </head> </body> </html>

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">  </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

JavaScript Exercise #1 Solution <html><head><title>prompt me</title> <script type="text/javascript" language="javascript">  </script> </head> </body> </html>

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">  </script> </head> </body> </html>

JavaScript Exercise #2 Solution <html><head><title>loop me</title> <script type="text/javascript" language="javascript">  </script> </head> </body> </html>

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”>

JavaScript Exercise #3 • Complete the JavaScript fragment <html><head><title>code testing page</title> <script type='text/javascript' language='javascript'>  </script> </head> <h1>Experiment with JavaScript below</h1> <form > <p><textarea ></textarea> <br><br><input type="button" ></p> </form> </body> </html>

JavaScript Exercise #3 Solution <html><head><title>code testing page</title> <script type='text/javascript' language='javascript'>  </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>

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

B118 Web Programming