1. (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 (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]

2. (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 -Setup the following invitation for different persons. -Show their names in different colors. The design: Firstly, ask the user to input the name. Then, ask the user to input the color. After that, set up html code for Dear XXX, (Remaining part is just plain html text.) Which color? Purple Who? John who color Dear who, If we invite different person, then this part is different. This part is always the same Dear John, The colored–name example

3. (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 … var who, color ; who = prompt ( ‘ Who? ’, ‘ ’ ); color = prompt ( ‘ Which color? ’, ‘ ’ ); document.write ( ‘ Dear <font color= “ ’ + color + ‘ ” > ’ + who + ‘, ’ ); Please come to my birthday party on May 18, 2007. See you! Yours, Helena Lec02_Slide03_ColoredNameInvitation.html According to the design, we can use JavaScript to give the instructions: Set 2 variables (var) that will be used for storing values. - these are actually locations in the computer's memory. Prompt for inputs: - the prompt dialogs will return the results. - the results will be stored in the who and color variables Add the html code to the page for Dear XXX, according to who and color. (Explain later) Dear John, Please come to my birthday party on May 18, 2007. See you! Yours, Helena Overall html code The colored–name example

4. (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 About the JavaScript code in the Example Totally 4 statements, each ended with ; Internet Explorer will handle them one by one, according to their order. As they are contained between and, Internet Explorer will treat them as JavaScript code, not normal html content. The contents between.. must follow JavaScript syntax. Otherwise, error occurs. About the Variables Other than who and color, we have much flexibility in choosing the variable names. (But better be meaningful!) When we need the values stored in these variables, we just type their names. Example: document.write( who ); About prompt We can assign a default value by setting the 2 nd argument, eg. prompt( ‘ Which color? ’, ‘ green ’ ); var who, color; who=prompt( ‘ Who? ’, ‘ ’ ); color=prompt( ‘ Which color? ’, ‘ ’ ); document.write( ‘ Dear <font color=“ ’ + color + ‘ ”> ’ + who + ‘, ’ ); How are you?  Does not follow JavaScript syntax at all !! The colored–name example

5. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 5 http://www.cs.cityu.edu.hk/~helena document.write( “John ” ); document.write( ‘John’ ); document.write( who ); document.write( ‘who’ ); document.write( ‘red’ ); document.write( color ); document.write( red ); document.write( ‘ John ’ ); document.write( ‘red’ + ‘John’ ); document.write( ‘ ’ + ‘ John ’ + ‘ ’ ); document.write( ‘ ’ + who + ‘ ’ ); var who, color; who=prompt( ‘ Who? ’, ‘ ’ ); color=prompt( ‘ Which color? ’, ‘ ’ ); document.write( _______ ); Which color? red Who? John who color Concatenate strings together using + <font color=“ red ”> Lec02_Slide05_ColoredNameTester.html What if we rewrite document.write(..) as: In this way, we can create the html code with who and color. The colored–name example Should give a string (interpreted as html)

6. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 6 http://www.cs.cityu.edu.hk/~helena (1) Obtain user input with prompt dialog a prompt dialog: allows the user to type a value. Some common methods to input data from user: var who, color; who=prompt( ‘ Who? ’, ‘ ’ ); color=prompt( ‘ Which color? ’, ‘ ’ ); Which color? red Who? John who color (2) Okay / Cancel: Using confirm dialog if (confirm( "Do you want to make it bold?" )) document.write('Dear ' + who + '..'); else document.write('Dear ' + who + '..'); confirm dialog allows the user to click OK or Cancel in response to a given message. if (..).. else.. checks the true/false value returned by the confirm dialog and performs the corresponding action. Input Data from User

7. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 7 http://www.cs.cityu.edu.hk/~helena (2) cont’d Okay / Cancel: Using confirm dialog Demo var who, color; who=prompt( ‘ Who? ’, ‘ ’ ); color=prompt( ‘ Which color? ’, ‘ ’ ); if (confirm( "Do you want to make it bold?" )) document.write('Dear ' + who + '..'); else document.write('Dear ' + who + '..'); Please come to my birthday party on May 18, 2007. See you! Yours, Helena Lec02_Slide07_BoldColoredNameInvitation.html Some common methods to input data from user: Input Data from User

8. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 8 http://www.cs.cityu.edu.hk/~helena (3) Input from a form:.. eg... The name of the form is set to F1. Create 2 elements: text box and button <INPUT TYPE="text" NAME="input" … <INPUT TYPE="button" … The name input is given to the text box. The text box is referred as: document.F1.input The value in the text box is: document.F1.input.value To calculate the square of 11: document.F1.input.value * document.F1.input.value Some common methods to input data from user: Input Data from User

9. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 9 http://www.cs.cityu.edu.hk/~helena The Form named F1: The event handler of onClick is to display the alert box that shows the result: text box: SIZE=4 gives space for roughly 4 'M' letters. button: VALUE="Cal.." sets the words shown on the button. Input Data from User Some common methods to input data from user: (3) cont’d Input from a form:.. Lec02_Slide09_SquareForm.html

10. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 10 http://www.cs.cityu.edu.hk/~helena happy The mystery of + Consider 2 text boxes: A B face happyface 123 A B 456 alert(document.F1.A.value + document.F1.B.value ) 123456 Not 579!! alert(document.F1.A.value + document.F1.B.value) Numbers and Strings Handling Numbers and Strings

11. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 11 http://www.cs.cityu.edu.hk/~helena Problem of "adding" numbers that we typed in textboxes -We know they are numbers. -But the computer doesn’t know about that.  Demo Use + Lec02_Slide11_AddStrings.html Numbers and Strings Handling Numbers and Strings

12. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 12 http://www.cs.cityu.edu.hk/~helena ? Understanding the problem of "adding" numbers The browser treats textbox and innerHTML contents as (text) strings A string is a sequence of characters. Example: "happy"contains 5 characters: 'h', 'a', 'p', 'p', 'y'. "123" contains 3 characters: '1', '2', '3'. When + is applied on a strings: it just joins them. Example:"happy" + "face"becomes "happyface" "123" + "456" becomes "123456". Question: "Then how to add 2 numbers?" Solution: use parseInt to get the numeric values according to the contents of the textboxes: alert(parseInt(document.F1.A.value) + parseInt(document.F1.B.value)) Numbers and Strings

13. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 13 http://www.cs.cityu.edu.hk/~helena Adding 2 numbers correctly: Demo Use + Lec02_Slide13_AddNumbers.html Numbers and Strings - Use of parseInt :

14. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 14 http://www.cs.cityu.edu.hk/~helena Why document.F1.input.value * document.F1.input.value works without using parseInt? ? Answer: Textbox, innerHTML, prompt dialog’s result, “…”, and ‘…’ are strings. "*" can be applied on numbers only, not strings. “+” has no such restriction. Therefore, for string1 * string2, the strings are automatically converted to numbers first so that “*” can be done. Such automatic-conversion won’t happen for string1 + string2. Recall slide#9: Numbers and Strings

15. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 15 http://www.cs.cityu.edu.hk/~helena Common operations: OperatorUses +Adds two numbers or appends two strings. If left-hand-side and right-hand-side of + have different types, the result will be a string. -Subtracts the second number from the first. /Divides the first number by the second. *Multiplies two numbers. %Divide the first number by the second and return the remainder. Strings are automatically converted to numbers first Numbers and Strings Handling Numbers and Strings

16. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 16 http://www.cs.cityu.edu.hk/~helena Introduction to Functions Salary Monthly Salary of Staff: Junior staff: $ 8000 Senior staff: $ 10000 <a href="javascript: document.getElementById('jun').innerHTML=..;void(0)"> Add $1000 for junior staff <a href="javascript: document.getElementById('sen').innerHTML=..;void(0)"> Add $1000 for senior staff <a href="javascript: document.getElementById('jun').innerHTML=..; document.getElementById('sen').innerHTML=..; void(0)"> Add $1000 for all staff The complete code is given at the course web. Lec02_Slide16_Salary.html This application is simple. Can you Explain the given code? Fill in the missing code?

17. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 17 http://www.cs.cityu.edu.hk/~helena Introduction to Functions Now the previous example is rewritten with 3 functions. (See explanation on next page.) Salary function addJun1000() {document.getElementById('jun').innerHTML=..; } function addSen1000() {document.getElementById('sen').innerHTML=..; } function addAll1000() {document.getElementById('jun').innerHTML=..; document.getElementById('sen').innerHTML=..; } Monthly Salary of Staff: Junior staff: $ 8000 Senior staff: $ 10000 Add $1000 for junior staff Add $1000 for senior staff Add $1000 for all staff Lec02_Slide17_Salary_3Functions.html

18. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 18 http://www.cs.cityu.edu.hk/~helena Introduction to Functions Instead of having detailed code inside the pseudo-URLs, we can write a function for each of them. At the moment, you may think of writing a function as: Grouping some statements and give them a name To run the code, just write the function name, then “()”. Refer to the given code: -Put functions in the head section  keep body elements simple and clear. -The functions are JavaScript code, so we put them in... -No “void(0)” is needed. Reason: these functions update the innerHTMLs but not return any value to the pseudo-URLs. So there is no risk of having a new page loaded. (Can a function return a value? Yes! We will learn that next week.) -Within a function, we can also call other functions: function addAll1000() {addJun1000(); addSen1000(); }

19. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 19 http://www.cs.cityu.edu.hk/~helena Introduction to Functions The code below rewrites the previous example with 2 functions. Salary function addJun1000() {document.getElementById('jun').innerHTML=..; } function addSen1000() {document.getElementById('sen').innerHTML=..; }.. Add $1000 for junior staff Add $1000 for senior staff Add $1000 for all staff Lec02_Slide19_Salary_2Functions.html  We can reuse a function again whenever needed. This is an important advantage of writing functions. The addAll1000 function is removed Apply 2 functions here. -- Just an alternative to Lec02_Slide17_Salary_3Functions.html

20. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 20 http://www.cs.cityu.edu.hk/~helena Summary 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