Introduction to Computer Programming 2. Program Structure I - 1http:// 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]

Introduction to Computer Programming 2. Program Structure I - 2http:// An Example – The colored-name invitation page (plain html) The page is in plain html: Demo Dear John, Please come to my birthday party on May 18, See you! Yours, Helena Dear John, The colored–name example something : bold color, font size, etc.. something : Lec02_Slide02_BoldColoredNameInvitation.html

Introduction to Computer Programming 2. Program Structure I - 3http:// 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 John, Dear, who wanted_color

Introduction to Computer Programming 2. Program Structure I - 4http:// Demo var who, wanted_color ; who = prompt ( ' Who? ', '' ); wanted_color = prompt ( ' Which color? ', '' ); document.write(' Dear <span style= '); document.write('"'); document.write('color:'); document.write(wanted_color); document.write('"'); document.write('>'); document.write(who); document.write(','); Please come to my birthday party on May 18, See you! Yours, Helena 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 John, Lec02_Slide04_BoldColoredNameInvitation.html

Introduction to Computer Programming 2. Program Structure I - 5http:// 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 and, they will be treated as JavaScript code, not normal html content. The contents between.. 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..'); NOT document.write(Dear..);  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 2 nd argument, eg. prompt( ‘ Which color? ’, ‘ green ’ ); prompt( ‘ Who? ’, ‘[type the name here]’ ); Show no default value: prompt( ‘ Which color? ’, ‘ ’ ); var who, wanted_color ; who=prompt('Who?', ''); wanted_color =prompt(' Which color? ', ''); document.write(' Dear <span style= '); document.write(..);.. document.write(who); document.write(', '); How are you?  Does not follow JavaScript syntax at all !! The colored–name example 2 single quotes

Introduction to Computer Programming 2. Program Structure I - 6http:// (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, wanted_color; who =prompt( ‘ Who? ’, ‘ ’ ); wanted_color =prompt( ‘ Which color? ’, ‘ ’ ); Which color? red Who? John who wanted_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 Asks for OK / Cancel. if (..).. else.. Checks the true/false value returned by the confirm dialog and performs the corresponding action. Input Data from User Use + to combine lines in slide 4

Introduction to Computer Programming 2. Program Structure I - 7http:// (2) cont’d Okay / Cancel: Using confirm dialog Demo var who, wanted_color; who=prompt( ‘ Who? ’, ‘ ’ ); wanted_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, See you! Yours, Helena Lec02_Slide07_BoldColoredNameInvitation.html Some common methods to input data from user: Input Data from User

Introduction to Computer Programming 2. Program Structure I - 8http:// (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" … In the above, 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

Introduction to Computer Programming 2. Program Structure I - 9http:// Square <input type="button" value="Calculate Square" onclick="alert(document.F1.input.value*document.F1.input.value);" /> 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 Other than F1 and value, we have freedom in choosing other names better be meaningful names! For example: myForm and number => document.myForm.number. value

Introduction to Computer Programming 2. Program Structure I - 10http:// 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 ) Not 579!! alert(document.F1.A.value + document.F1.B.value) Numbers and Strings Handling Numbers and Strings

Introduction to Computer Programming 2. Program Structure I - 11http:// Problem of "adding" numbers which 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

Introduction to Computer Programming 2. Program Structure I - 12http:// ? 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

Introduction to Computer Programming 2. Program Structure I - 13http:// Adding 2 numbers correctly: Demo Use + Lec02_Slide13_AddNumbers.html Numbers and Strings - Use of parseInt :

Introduction to Computer Programming 2. Program Structure I - 14http:// Square <input type="button" value="Calculate Square" onclick="alert(document.F1.input.value*document.F1.input.value);" /> Lec02_Slide09_SquareForm.html Why document.F1.input.value * document.F1.input.value works without using parseInt? ? Answer: Textboxes, innerHTML, prompt dialogs’ results, “…”, and ‘…’ are strings. "*" can be applied on numbers. But "*" cannot be applied on strings. Therefore, for string1 * string2, string1 and string2 are automatically converted to numbers first, so that “*” can be done.  JavaScript is smart here “+” can be applied to both numbers and strings, so no such automatic- conversion will be done. Recall slide#9: Numbers and Strings

Introduction to Computer Programming 2. Program Structure I - 15http:// 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

Introduction to Computer Programming 2. Program Structure I - 16http:// Introduction to Functions Salary Monthly Salary of Staff: Junior staff: $ 8000 Senior staff: $ <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?   

Introduction to Computer Programming 2. Program Structure I - 17http:// 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: $ Add $1000 for junior staff Add $1000 for senior staff Add $1000 for all staff Lec02_Slide17_Salary_3Functions.html

Introduction to Computer Programming 2. Program Structure I - 18http:// 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: -No “void(0);” is needed. Reason: these functions update the innerHTMLs but do 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.) -Put functions in the head section  keep body elements simple and clear. -The functions are JavaScript code, so we put them in... -Within a function, we can also call other functions: function addAll1000() { addJun1000(); addSen1000(); } function addAll1000() { document.getElementById('jun').innerHTML=..; document.getElementById('sen').innerHTML=..; } Add $1000 for all staff

Introduction to Computer Programming 2. Program Structure I - 19http:// 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

Introduction to Computer Programming 2. Program Structure I - 20http:// 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