Program Structure I(Overview)Handlingof Values-Thecolored-name exampleprompt, document.write, simpleuse of Variables,"+"on stringsInputDatafromUserprompt (type something)confirm (ok/ cancel)textbox(inaform)-Thesquare-formexampleNumbersandStrings-The add-strings,add-numbersexamples,useof+,parselntIntroduction to Functions-The add-salaries example[Pleaseswitchoffyourphone]http:lwww.cs.cityu.edu.hk/-helena2.ProgramStructure1-1IntroductiontoComputerProgramming
Introduction to Computer Programming http://www.cs.cityu.edu.hk/~helena 2. Program Structure I - 1 (Overview) Handling of Values – The colored–name example prompt, document.write, simple use of Variables, “+” on strings Input Data from User prompt (type something) confirm (ok / cancel) textbox (in a form) – The square-form example Numbers and Strings – The add-strings, add-numbers examples, use of + , parseInt Introduction to Functions – The add-salaries example [Please switch off your phone]
Thecolored-nameexampleAnExample-The colored-nameinvitationpage(plainhtml)AddressDear<b><spanstyle="color:purple">John</span></b>Dear John,PleasecometomybirthdaypartyonMay18,2007.The page is in plain html:<html>See you!<head><title>Demo</title>Yours,</head>Helena<body>Dear<b><spanstyle="color:purple">John</span></b>,<b>something</b>:bold<br/><br/>Please come to my birthday party on May 18, 2007.<spanstyle=..>something</span><br/><br/>colorfont size,etc..See youl<br/><br/>Yours,<br/>Helena</body></html>Lec02Slide02 BoldColoredNamelnvitation.htmlIntroduction to ComputerProgramming2.ProgramStructure1-2http:llwww.cs.cityu.edu.hk/-helena
Introduction to Computer Programming http://www.cs.cityu.edu.hk/~helena 2. Program Structure I - 2 An Example – The colored-name invitation page (plain html) The page is in plain html: <html> <head> <title>Demo</title> </head> <body> Dear <b><span style="color:purple">John</span></b>, <br/><br/> Please come to my birthday party on May 18, 2007. <br/><br/> See you!<br/><br/> Yours,<br/> Helena </body> </html> Dear <b><span style="color:purple">John</span></b>, The colored–name example <b>something</b> : bold color, font size, etc. <span style=.>something</span> : Lec02_Slide02_BoldColoredNameInvitation.html
Thecolored-nameexampleNow,aflexible webpageto invite any person / colorAddressDear John,<Dear<b><span style="color:purple*>John</span></b>Ifwe invite differentperson, then this part isdifferent.PleasecometomybirthdaypartyonMay18,2007.(Use JavaScript)See you!This part is always thesame(plainhtmltext)Yours,HelenaLec02Slide04 BoldColoredNamelnvitation.htmlThe design:Who?JohnUse JavaScript to:whoFirstly,askthe userto inputthename.Which color?PurpleThen, ask the user to input the wanted color.wanted colorAfterthat, use JavaScriptto outputthehtmlDear<b><spanstywanted_color</swho/b>,codeforDearxxx.(Remaining part is just plain html text.)http://www.cs.cityu.edu.hk/-helena2.ProgramStructure-3IntroductiontoComputerProgramming
Introduction to Computer Programming http://www.cs.cityu.edu.hk/~helena 2. Program Structure I - 3 Now, a flexible webpage to invite any person / color The colored–name example The design: Use JavaScript to: Firstly, ask the user to input the name. Then, ask the user to input the wanted color. After that, use JavaScript to output the html code for Dear XXX, (Remaining part is just plain html text.) Which color? Purple Who? John who wanted_color If we invite different person, then this part is different. (Use JavaScript) This part is always the same (plain html text) Lec02_Slide04_BoldColoredNameInvitation.html Dear <b><span style="color:purple">John</span></b>, Dear <b><span style="color: "> </span></b>, who wanted_color
Lec02Slide04BoldColoredNamelnvitation.html<html>The solution: To invite any person / color<head><title>Demo</title></head>Use a JavaScriptblock togive:<bodyStep1.promptforwhoandwantedcolor(Lines 9-11)line8<scripttype="text/javascript">Set2 variables (var who,wanted color)linevar who,wanted_color:whichwillbeusedforstoringvalueslinwho=prompt("Who?'""):-actuallystored inthecomputer'smemory.linevgnted_.color=prompt('Which color?', " ):Promptforinputslindpcument.write(""");-thepromptdialogswill returntheresultslindpcument.write("color:")-theresultswillbestoredinwhoandwanted color.lindpcument.write(wanted_cotor)lindpcument.write("""):Who?lindocument.write(>"):Johnlindpcument.write(who):whoWhich color?lindpcument.write(</span>/b>,');:Purpleline 19 </script>wanted_colorline20<br/×br/>Please come to my birthday party on May 18, 2007.Step2.usewhoandwantedcolor<br/×br/>indocument.write(Lines12-19)See youkbr/×br/>Give:Yours,<br/>Dear<b><spanstyle="color:purple">HelenaJohn</span></b>,</body></html>
Introduction to Computer Programming http://www.cs.cityu.edu.hk/~helena 2. Program Structure I - 4 <html> <head> <title>Demo</title> </head> <body> <script type="text/javascript"> var who, wanted_color; who=prompt( 'Who?', '' ); wanted_color=prompt( 'Which color?', '' ); document.write('Dear <b><span style='); document.write('"'); document.write('color:'); document.write(wanted_color); document.write('"'); document.write('>'); document.write(who); document.write('</span></b>,'); </script> <br/><br/> Please come to my birthday party on May 18, 2007. <br/><br/> See you!<br/><br/> Yours,<br/> Helena </body> </html> The colored–name example The solution: To invite any person / color line 8 line 9 line 10 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20 Use a JavaScript block to give: Step 1. prompt for who and wanted_color (Lines 9-11) Set 2 variables (var who, wanted_color;) which will be used for storing values. - actually stored in the computer's memory. Prompt for inputs: - the prompt dialogs will return the results. - the results will be stored in who and wanted_color. Which color? Purple Who? John who wanted_color Step 2. use who and wanted_color in document.write (Lines 12-19) Give: Dear <b><span style="color:purple"> John</span></b>, Lec02_Slide04_BoldColoredNameInvitation.html
The colored-name exampleAbouttheJavaScriptcodeintheExample<scripttype="text/javascript".Totally11statements,eachendedwith;var who,wanted_color'who=prompt("Who?',");.The browser will handle them one by one, accordingwanted_color=prompt("Whichcolor?',"")totheir order.document.write('Dear<b><spanstyle=');document.write(..):·Astheyarecontainedbetween<script..>and</script>,theywillbetreatedasJavaScriptcode,notdocument.write(who):normalhtmlcontent.document.write(</span></b>,'):</script>.The contents between<script..>..</script>mustfollow JavaScript syntax.Otherwise,erroroccurs.<script type="text/javascript">AbouttheVariablesHow are you?</script>x.Otherthanwho and wanted color,wehavemuchDoesnotfollowflexibility in naming. (Better be meaningful names- learn more later)JavaScript syntax at all !!.Forplaintext,weaddquotes.Eg:document.write(Dear<b>..);NOTdocument.write(Dear<b>..);.Butwhen we need the values stored in variables,weEg:justtypevariablenames.NOTdocument.write(who);document.write(who');About prompt.We can assign a default valueby settingthe 2nd2 single quotes2.ProgramStructure-5
Introduction to Computer Programming http://www.cs.cityu.edu.hk/~helena 2. Program Structure I - 5 About the JavaScript code in the Example • Totally 11 statements, each ended with ; • The browser will handle them one by one, according to their order. • As they are contained between <script.> and </script>, they will be treated as JavaScript code, not normal html content. • The contents between <script.> . </script> must follow JavaScript syntax. Otherwise, error occurs. About the Variables • Other than who and wanted_color, we have much flexibility in naming. (Better be meaningful names - learn more later.) • For plain text, we add quotes. Eg: document.write('Dear <b>.'); NOT document.write(Dear <b>.); • But when we need the values stored in variables, we just type variable names. Eg: document.write( who ); NOT document.write('who'); About prompt • We can assign a default value by setting the 2nd argument, eg. prompt( ‘ Which color? ’, ‘ green ’ ); prompt( ‘ Who? ’, ‘[type the name here]’ ); • Show no default value: prompt( ‘ Which color? ’, ‘ ’ ); <script type="text/javascript"> var who, wanted_color; who=prompt('Who?', ''); wanted_color=prompt('Which color?', ''); document.write('Dear <b><span style='); document.write(.); .document.write(who); document.write('</span></b>,'); </script> <script type="text/javascript"> How are you? </script> D oes not follow JavaScript syntax at all !! The colored–name example 2 single quotes