Program Structure I Overview Handling of Values The

The colored–name example An Example - Setup the following invitation for different persons. -

The colored–name example According to the design, we can use Java. Script to give

The colored–name example About the Java. Script code in the Example <SCRIPT LANGUAGE=javascript> var

The colored–name example What if we rewrite document. write(. . ) as: Lec 02_Slide

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

The colored–name example An Example - Setup the following invitation for different persons. - Show their names in different colors. The design: Who? John Firstly, ask the user to input the name. Which color? Then, ask the user to input the color. Purple color After that, set up html code for Dear XXX, >, (Remaining part is just plain html text. ) Dear If we invite different person, then this part is different. who ont></b /f < o h w > r=“ color ” lo o c t n o f < <b> /font></b>, Dear < urple”>John P “ r= lo o c t n <b><fo This part is always the same (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 2

The colored–name example According to the design, we can use Java. Script to give the instructions: … <BODY> Lec 02_Slide 03_Colored. Name. Invitation. html <SCRIPT LANGUAGE=javascript> var who, color; who=prompt( ‘ Who? ’, ‘ ’ ); color=prompt( ‘ Which color? ’, ‘ ’ ); document. write( ‘ Dear <b><font color=“ ’ + color + ‘ ”> ’ + who + ‘ </font></b>, <br/> ’ ); </SCRIPT> 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) Please come to my birthday party on May 18, 2007. </br> See you!<br/> Yours, <br/> Helena Dear <b><font color="Purple">John</font></b>, <br/> Please come to my birthday party on May 18, 2007. </BODY> </HTML> <br/> (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong See you!<br/> Yours, <br/> Helena http: //www. cs. cityu. edu. hk/~helena o Overall html c 2. Program Structure I - 3 de

The colored–name example About the Java. Script code in the Example <SCRIPT LANGUAGE=javascript> var who, color; • Internet Explorer will handle them one by one, who=prompt( ‘ Who? ’, ‘ ’ ); according to their order. color=prompt( ‘ Which color? ’, ‘ ’ ); document. write( ‘ Dear <b><font color=“ ’ + • As they are contained between <script. . > and </script>, color + ‘ ”> ’ + Internet Explorer will treat them as Java. Script code, who + not normal html content. ‘ </font></b>, <br/> ’ ); </SCRIPT> • The contents between <script. . >. . </script> must follow Java. Script syntax. Otherwise, error occurs. <script LANGUAGE=javascript> About the Variables How are you? </script> • Other than who and color, we have much flexibility in Does not follow Java. Script choosing the variable names. (But better be meaningful!) syntax at all !! • When we need the values stored in these variables, we just type their names. Example: document. write( who ); • Totally 4 statements, each ended with ; About prompt • We can assign a default value by setting the 2 nd argument, eg. prompt( ‘ Which color? ’, ‘ green ’ ); (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 4

The colored–name example What if we rewrite document. write(. . ) as: Lec 02_Slide 05_Colored. Name. Tester. html var who, color; who=prompt( ‘ Who? ’, ‘ ’ ); color=prompt( ‘ Which color? ’, ‘ ’ ); document. write( _______ ); document. write( “John ” ); document. write( ‘John’ ); document. write( who ); Should give st ring (interpretedaas html) document. write( ‘who’ ); document. write( ‘red’ ); Who? document. write( color ); John Which color? document. write( red ); red document. write( ‘<font color=“red”>John</font>’ ); document. write( ‘red’ + ‘John’ ); who color Concatenate strings together using + document. write( ‘ <font color=“red”> ’ + ‘ John ’ + ‘ </font> ’ ); document. write( ‘ <font color=“red”> ’ + who + ‘ </font> ’ ); <font color=“ red ”> document. write(‘<font color=“’ + ‘red’ + ‘”>’ + who + ‘ </font> ’ ); document. write(‘<font color=“’ + color + ‘”>’ + who + ‘ </font> ’ ); (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong http: //www. cs. cityu. edu. hk/~helena In this way, we can create the html code with who and color. 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, color; who=prompt( ‘ Who? ’, ‘ ’ ); color=prompt( ‘ Which color? ’, ‘ ’ ); John who Which color? red color (2) Okay / Cancel: Using confirm dialog • 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. if (confirm( "Do you want to make it bold? " )) document. write('Dear <b><font color=“' + color + '”>' + who + '</font></b>. . '); else document. write('Dear <font color=“' + color + '”>' + who + '</font>. . '); (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 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 Lec 02_Slide 07_Bold. Colored. Name. Invitation. html <HTML> <HEAD> <TITLE>Demo</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=javascript> var who, color; who=prompt( ‘ Who? ’, ‘ ’ ); color=prompt( ‘ Which color? ’, ‘ ’ ); if (confirm( "Do you want to make it bold? " )) document. write('Dear <b><font color=“' + color + '”>' + who + '</font></b>. . '); else document. write('Dear <font color=“' + color + '”>' + who + '</font>. . '); </SCRIPT> Please come to my birthday party on May 18, 2007. </br> See you!<br/> Yours, <br/> Helena </BODY> (CS 1301) Introduction to Computer Programming </HTML> City Univ of HK / Dept of CS / Helena Wong http: //www. cs. cityu. edu. hk/~helena 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> • 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 (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 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 The Form named F 1: • text box: SIZE=4 gives space for roughly 4 'M' letters. • button: VALUE="Cal. . " sets the words shown on the button. (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong The event handler of on. Click is to display the alert box that shows the result: http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 9

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

Numbers and Strings Handling Numbers and Strings Problem of "adding" numbers that 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> (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong </HTML> 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)) (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 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> (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 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: Answer: Textbox, inner. HTML, prompt dialog’s result, “…”, and ‘…’ are strings. "*" can be applied on numbers only, not strings. “+” has no such restriction. Therefore, for string 1 * string 2, the strings are automatically converted to numbers first so that “*” can be done. Such automatic-conversion won’t happen for string 1 + string 2. (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 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. (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 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 (CS 1301) Introduction to Computer Programming </BODY> City Univ of HK / Dept of CS / Helena Wong </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 language=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/> <a href="javascript: add. All 1000()"> Add $1000 for all staff </a> </BODY> (CS 1301) Introduction to Computer Programming </HTML> 2. Program Structure I - 17 http: //www. cs. cityu. edu. hk/~helena City Univ of HK / Dept of CS / Helena Wong

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 Java. Script code, so we put them in <script. . >. . </script>. - No “void(0)” is needed. Reason: these functions update the inner. HTMLs 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: (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong function add. All 1000() { add. Jun 1000(); add. Sen 1000(); } http: //www. cs. cityu. edu. hk/~helena 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 language=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. (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 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 (CS 1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong http: //www. cs. cityu. edu. hk/~helena 2. Program Structure I - 20