{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

2ProgramStructureI - Program Structure I(Overview Handling...

Info iconThis preview shows pages 1–5. Sign up to view the full content.

View Full Document Right Arrow Icon
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 1 http://www.cs.cityu.edu.hk/~helena Program Structure I Program Structure I (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]
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 2 http://www.cs.cityu.edu.hk/~helena 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
Background image of page 2
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 3 http://www.cs.cityu.edu.hk/~helena 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 wh o   wante d_c o l o r  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
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 4 http://www.cs.cityu.edu.hk/~helena <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.
Background image of page 4
Image of page 5
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}