Program Structure I Overview Handling of Values The

The colored–name example An Example – The colored-name invitation page (plain html) >, n</span></b

The colored–name example Now, a flexible webpage to invite any person / color >,

The solution: To invite any person / color Use a Java. Script block to

The colored–name example About the Java. Script code in the Example • Totally 11

Input Data from User Some common methods to input data from user: (1) Obtain

Input Data from User Some common methods to input data from user: (2) cont’d

Input Data from User Some common methods to input data from user: (3) Input

Input Data from User Some common methods to input data from user: (3) cont’d

Numbers and Strings Handling Numbers and Strings The mystery of + Consider 2 text

Numbers and Strings Handling Numbers and Strings Problem of "adding" numbers which we typed

Numbers and Strings Understanding the problem of "adding" numbers • The browser treats textbox

Numbers and Strings Adding 2 numbers correctly: - Use of parse. Int : <html>

Numbers and Strings ? Why document. F 1. input. value * document. F 1.

Numbers and Strings Handling Numbers and Strings Common operations: Operator + Uses Adds two

Introduction to Functions <html> <head><title>Salary</title></head> <body> <b>Monthly Salary of Staff: </b> <br/> Junior staff:

Introduction to Functions Now the previous example is rewritten with 3 functions. (See explanation

Introduction to Functions • Instead of having detailed code inside the pseudo-URLs, we can

Introduction to Functions The code below rewrites the previous example with 2 functions. <html>

Summary Handling of Values – The colored–name example prompt, document. write, simple use of

Slides: 20

Download presentation

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 + , parse. Introduction to Functions – The add-salaries example [Please switch off your phone] Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 1

The colored–name example An Example – The colored-name invitation page (plain html) >, n</span></b h r: purple">Jo lo o c " = le ty s an Dear <b><sp The page is in plain html: <html> <head> <title>Demo</title> </head> <body> Dear <b><span style="color: purple">John</span></b>, <br/> <b>something</b> : bold Please come to my birthday party on May 18, 2007. <br/> <span style=. . >something</span> : color, font size, etc. . See you!<br/> Yours, <br/> Helena </body> </html> Lec 02_Slide 02_Bold. Colored. Name. Invitation. html Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 2

The colored–name example Now, a flexible webpage to invite any person / color >, n</span></b h r: purple">Jo lo o c " = le ty s an Dear <b><sp If we invite different person, then this part is different. (Use Java. Script) This part is always the same (plain html text) Lec 02_Slide 04_Bold. Colored. Name. Invitation. html The design: Who? John Use Java. Script to: Firstly, ask the user to input the name. Which color? Purple Then, ask the user to input the wanted color. After that, use Java. Script to output the html _color code for Dear XXX, lor: wanted an style="co who wanted_color an></b>, "> who </sp Dear <b><sp (Remaining part is just plain html text. ) Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 3

The solution: To invite any person / color Use a Java. Script block to give: 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. 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>, Introduction to Computer Programming <head> <title>Demo</title> </head> <body> Step 1. prompt for who and wanted_color (Lines 9 -11) Which color? Purple Lec 02_Slide 04_Bold. Colored. Name. Invitation. html The colored–name example <html> line 8 <script type="text/javascript"> line 9 line 10 line 11 line 12 style='); line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20 var who, wanted_color; who=prompt( 'Who? ', '' ); wanted_color=prompt( 'Which color? ', document. write('Dear <b><span '' ); document. write('"'); document. write('color: '); document. write(wanted_color); document. write('"'); document. write('>'); document. write(who); document. write('</span></b>, '); </script> <br/> Please come to my birthday party on May 18, 2007. <br/> See you!<br/> Yours, <br/> Helena </body> http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 4

The colored–name example About the Java. Script 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 Java. Script code, not normal html content. • The contents between <script. . >. . </script> must follow Java. Script 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 <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> document. write(Dear <b>. . ); Does not follow Java. Script syntax at all !! • 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? ’, Introduction to Computer Programming ‘ ’ ); 2 single http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 5

Input Data from User Some common methods to input data from user: (1) Obtain user input with prompt dialog • a prompt dialog: allows the user to type a value. Who? var who, wanted_color; who=prompt( ‘ Who? ’, ‘ ’ ); wanted_color=prompt( ‘ Which color? ’, ‘ ’ ); John Which color? red who wanted_color (2) Okay / Cancel: Using confirm dialog • confirm dialog Asks for OK / Cancel. • if (. . ). . else. . Checks the true/false value returned by the confirm dialog and performs the corresponding action. if (confirm( "Do you want to make it bold? " )) Use + to combin e lines 12 -19 in sli de 4 document. write('Dear <b><span style="color: ' + wanted_color + '">' + who + '</span></b>, '); else document. write('Dear <span style="color: ' + wanted_color + '">' + who + '</span>, '); Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 6

Input Data from User Some common methods to input data from user: (2) cont’d Okay / Cancel: Using confirm dialog <html> <head> <title>Demo</title> </head> Lec 02_Slide 07_Bold. Colored. Name. Invitation. html <body> <script type="text/javascript"> var who, wanted_color; who=prompt( ‘ Who? ’, ‘ ’ ); wanted_color=prompt( ‘ Which color? ’, ‘ ’ ); if (confirm( "Do you want to make it bold? " )) document. write('Dear <b><span style="color: ' + wanted_color + '">' + who + '</span></b>, '); else document. write('Dear <span style="color: ' + wanted_color + '">' + who + '</span>, '); </script> <br/> Please come to my birthday party on May 18, 2007. <br/> See you!<br/> Yours, <br/> Helena </body> http: //www. cs. cityu. edu. hk/~helena Introduction </html>to Computer Programming 2. Program Structure I - 7

Input Data from User Some common methods to input data from user: (3) Input from a form: <form. . >. . </form> • eg. <form name="F 1">. . </form> The name of the form is set to F 1. • Create 2 elements: text box and button <form name="F 1"> <input type="text" name="input" … <input type="button" … </form> • In the above, the name input is given to the text box. • The text box is referred as: document. F 1. input The value in the text box is: document. F 1. input. value To calculate the square of 11: document. F 1. input. value * document. F 1. input. value Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 8

Input Data from User Some common methods to input data from user: (3) cont’d Input from a form: <form. . >. . </form> Lec 02_Slide 09_Square. Form. html <html> <head><title>Square</title></head> <body> <form name="F 1"> The Form named F 1: <input type="text" name="input" size="4" /> <input type="button" value="Calculate Square" onclick="alert(document. F 1. input. value*document. F 1. input. val ue); " /> • text box: size="4" gives space for roughly 4 'M' letters. • button: value="Cal. . " sets the words shown on the button. </form> </body> </html> The event handler of onclick is to display the alert box that shows the result: Other than F 1 and value, we have freedom in choosing other names better be meaningful names! http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 9 For example: my. Form => document. my. Form. number. value Introduction to Computer Programmingand number

Numbers and Strings Handling Numbers and Strings The mystery of + Consider 2 text boxes: A happy B face A 123 B 456 <form name="F 1"> <input type="text" name="A" /> <input type="text" name="B" /> </form> alert(document. F 1. A. value + document. F 1. B. value) happyface alert(document. F 1. A. value + document. F 1. B. value) 123456 Not 579!! Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 10

Numbers and Strings Handling Numbers and Strings Problem of "adding" numbers which we typed in textboxes - We know they are numbers. - But the computer doesn’t know about that. <html> Lec 02_Slide 11_Add. Strings. html <head><title>Demo</title></head> <body> <form name="F 1"> <input type="text" name="A" /> <input type="text" name="B" /> </form> <a href="javascript: alert(document. F 1. A. value + document. F 1. B. value)"> Use + </a> </body> </html> Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 11

Numbers and Strings Understanding the problem of "adding" numbers • The browser treats textbox and inner. HTML contents as (text) strings • A string is a sequence of characters. Example: "happy" contains 5 characters: 'h', 'a', '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 parse. Int to get the numeric values according to the contents of the textboxes: alert(parse. Int(document. F 1. A. value) + parse. Int(document. F 1. B. value)) Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 12

Numbers and Strings Adding 2 numbers correctly: - Use of parse. Int : <html> Lec 02_Slide 13_Add. Numbers. html <head><title>Demo</title></head> <body> <form name="F 1"> <input type="text" name="A" /> <input type="text" name="B" /> </form> <a href="javascript: alert(parse. Int(document. F 1. A. value) + parse. Int(document. F 1. B. value))">Use + </a> </body> </html> Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 13

Numbers and Strings ? Why document. F 1. input. value * document. F 1. input. value works without using parse. Int? Recall slide#9: <html> <head><title>Square</title></head> <body> Lec 02_Slide 09_Square. Form. html <form name="F 1"> <input type="text" name="input" size="4" /> <input type="button" value="Calculate Square" onclick="alert(document. F 1. input. value*document. F 1. input. val ue); " /> </form> </body> </html> Answer: Textboxes, inner. HTML, prompt dialogs’ results, “…”, and ‘…’ are strings. "*" can be applied on numbers. But "*" cannot be applied on strings. Therefore, for string 1 * string 2, string 1 and string 2 are automatically converted to numbers first, so that “*” can be done. Java. Script is smart here “+” can be applied to both numbers and strings, so no such automaticconversion will be done. Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 14

Numbers and Strings Handling Numbers and Strings Common operations: Operator + Uses 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. Strings are automatically converted to numbers first - 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. Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 15

Introduction to Functions <html> <head><title>Salary</title></head> <body> <b>Monthly Salary of Staff: </b> <br/> Junior staff: $<span id="jun">8000</span><br/> Senior staff: $<span id="sen">10000</span><br/> <a href="javascript: document. get. Element. By. Id('jun'). inner. HTML=. . ; void(0); "> Add $1000 for junior staff </a> <br/> <a href="javascript: document. get. Element. By. Id('sen'). inner. HTML=. . ; void(0); "> Add $1000 for senior staff </a> This application is simple. Can you • Explain the given code? • Fill in the missing code? <br/> <a href="javascript: document. get. Element. By. Id('jun'). inner. HTML=. . ; document. get. Element. By. Id('sen'). inner. HTML=. . ; void(0); "> given s i Add $1000 for all staff e d o lete c eb. p </a> m o l The c ourse w y. htm </body> Introduction to Computer Programming </html> r c _Sala at the 6 1 e _Slid http: //www. cs. cityu. edu. hk/~helena Lec 02 2. Program Structure I - 16

Introduction to Functions Now the previous example is rewritten with 3 functions. (See explanation on next page. ) <html> <head> <title>Salary</title> Lec 02_Slide 17_Salary_3 Functions. html <script type="text/javascript"> function add. Jun 1000() { document. get. Element. By. Id('jun'). inner. HTML=. . ; } function add. Sen 1000() { document. get. Element. By. Id('sen'). inner. HTML=. . ; } function add. All 1000() { document. get. Element. By. Id('jun'). inner. HTML=. . ; document. get. Element. By. Id('sen'). inner. HTML=. . ; } </script> </head> <body> <b>Monthly Salary of Staff: </b> <br/> Junior staff: $<span id="jun">8000</span><br/> Senior staff: $<span id="sen">10000</span><br/> <a href="javascript: add. Jun 1000()"> Add $1000 for junior staff </a> <br/> <a href="javascript: add. Sen 1000()"> Add $1000 for senior staff </a> <br/> Introduction to Computer Programming <a href="javascript: add. All 1000()"> Add $1000 for all staff </a> </body> http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 17 </html>

Introduction to Functions • Instead of having detailed code inside the pseudo-URLs, we can write a function for each of them. function add. All 1000() { document. get. Element. By. Id('jun'). inner. HTM • 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: document. get. Element. By. Id('sen'). inner. HTM <a href="javascript: add. All 1000()"> Add $1000 for all staff </a> - No “void(0); ” is needed. Reason: these functions update the inner. HTMLs 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 Java. Script code, so we put them in <script. . >. . </script>. - Within a function, we can also call other functions: Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena function add. All 1000() { add. Jun 1000(); add. Sen 1000(); } 2. Program Structure I - 18

Introduction to Functions The code below rewrites the previous example with 2 functions. <html> <head> <title>Salary</title> Lec 02_Slide 19_Salary_2 Functions. html to -- Just an alternative y_3 Functions. html ar al S 7_ e 1 lid S 2_ c 0 Le <script type="text/javascript"> function add. Jun 1000() { document. get. Element. By. Id('jun'). inner. HTML=. . ; } function add. Sen 1000() { document. get. Element. By. Id('sen'). inner. HTML=. . ; } </script> n is removed 00 functio The add. All 10 </head> <body> . . <a href="javascript: add. Jun 1000()"> Add $1000 for junior staff </a> <br/> <a href="javascript: add. Sen 1000()"> Add $1000 for senior staff </a> <br/> <a href="javascript: add. Jun 1000(); add. Sen 1000(); "> Add $1000 for all staff </a> </body> </html> Apply 2 functions here. v We can reuse a function again whenever needed. This is an important advantage of writing functions. Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 19

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 + , parse. Introduction to Functions – The add-salaries example Introduction to Computer Programming http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 20