1 / 20

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

aleciaroberts
Download Presentation

Program Structure I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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. The colored–name example Who? John Which color? Purple Dear <b><font color=“color ”>who</font></b>, • Setup the following invitation for different persons. • Show their names in different colors. An Example 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.) who color Dear <b><font color=“Purple”>John</font></b>, If we invite different person, then this part is different. This part is always the same

  3. The colored–name example Lec02_Slide03_ColoredNameInvitation.html … <BODY> <SCRIPT LANGUAGE=javascript> varwho, color; who=prompt( ‘Who?’, ‘ ’ ); color=prompt( ‘Which color?’, ‘ ’ ); document.write( ‘ Dear <b><font color=“’ + color + ‘”>’ + who + ‘</font></b>,<br/><br/>’ ); </SCRIPT> Please come to my birthday party on May 18, 2007.</br></br> See you!<br/><br/> Yours,<br/> Helena </BODY> </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 pagefor Dear XXX, according to who and color. (Explain later) Dear <b><font color="Purple">John</font></b>,<br/><br/> Please come to my birthday party on May 18, 2007. <br/><br/> See you!<br/><br/> Yours,<br/> Helena Overall html code

  4. The colored–name example <script LANGUAGE=javascript> How are you? </script>  Does not follow JavaScript syntax at all !! • 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 <script..> and </script>, Internet Explorer will treat them as JavaScript code, not normal html content. • The contents between <script..> .. </script> 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 2nd argument, eg. prompt( ‘ Which color? ’, ‘ green ’ ); <SCRIPT LANGUAGE=javascript> var who, color; who=prompt( ‘Who?’, ‘ ’ ); color=prompt( ‘Which color?’, ‘ ’ ); document.write( ‘ Dear <b><font color=“’ + color + ‘ ”>’ + who + ‘</font></b>,<br/><br/>’ ); </SCRIPT>

  5. The colored–name example Should give a string (interpreted as html) Who? who John color Which color? red Concatenate strings together using + <font color=“ red ”> What if we rewrite document.write(..) as: Lec02_Slide05_ColoredNameTester.html var who, color; who=prompt( ‘Who?’, ‘ ’ ); color=prompt( ‘Which color?’, ‘ ’ ); document.write( _______ ); document.write( “John ” ); document.write( ‘John’ ); document.write( who ); document.write( ‘who’ ); document.write( ‘red’ ); document.write( color ); document.write( red ); document.write( ‘<font color=“red”>John</font>’ ); document.write( ‘red’ + ‘John’ ); document.write( ‘<font color=“red”>’ + ‘John’ + ‘</font>’ ); document.write( ‘<font color=“red”>’ + who + ‘</font>’ ); document.write(‘<font color=“’ + ‘red’ + ‘”>’ + who + ‘ </font>’ ); document.write(‘<font color=“’ + color + ‘”>’ + who + ‘ </font>’ ); In this way, we can create the html code with who and color.

  6. Input Data from User var who, color; who=prompt( ‘Who?’, ‘ ’ ); color=prompt( ‘Which color?’, ‘ ’ ); Who? John who color Which color? red 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. (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>..');

  7. Input Data from User Lec02_Slide07_BoldColoredNameInvitation.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></br> See you!<br/><br/> Yours,<br/> Helena </BODY> </HTML> Some common methods to input data from user: (2) cont’d Okay / Cancel: Using confirm dialog

  8. Input Data from User Some common methods to input data from user: (3) Input from a form: <FORM ..> ..</FORM> • eg. <FORM NAME="F1"> .. </FORM> • The name of the form is set to F1. • Create 2 elements: text box and button <FORM NAME="F1"> <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.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

  9. Input Data from User Some common methods to input data from user: (3) cont’d Input from a form: <FORM ..> ..</FORM> Lec02_Slide09_SquareForm.html The Form named F1: • text box: SIZE=4gives space for roughly 4 'M' letters. • button: VALUE="Cal.." sets the words shown on the button. The event handler of onClick is to display the alert box that shows the result:

  10. Numbers and Strings happyface Handling Numbers and Strings The mystery of+ Consider 2 text boxes: <FORM NAME="F1"> <INPUT TYPE="text" NAME="A" /> <INPUT TYPE="text" NAME="B" /> </FORM> A happy alert(document.F1.A.value + document.F1.B.value) face B A 123 alert(document.F1.A.value+ document.F1.B.value) 123456 456 B Not 579!!

  11. Numbers and Strings Lec02_Slide11_AddStrings.html <HTML> <HEAD><TITLE>Demo</TITLE></HEAD> <BODY> <FORM NAME="F1"> <INPUT TYPE="text" NAME="A"> <INPUT TYPE="text" NAME="B"> </FORM> <a href="javascript: alert(document.F1.A.value + document.F1.B.value)">Use + </a> </BODY> </HTML> 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.

  12. Numbers and Strings ? • 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))

  13. Numbers and Strings Lec02_Slide13_AddNumbers.html <HTML> <HEAD><TITLE>Demo</TITLE></HEAD> <BODY> <FORM NAME="F1"> <INPUT TYPE="text" NAME="A"> <INPUT TYPE="text" NAME="B"> </FORM> <a href="javascript: alert(parseInt(document.F1.A.value) + parseInt(document.F1.B.value))">Use + </a> </BODY> </HTML> • Adding 2 numbers correctly: - Use of parseInt :

  14. Numbers and Strings Whydocument.F1.input.value* document.F1.input.valueworks without using parseInt? ? Recall slide#9: 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.

  15. Numbers and Strings Handling Numbers and Strings Common operations: Strings are automatically converted to numbers first

  16. Introduction to Functions 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/> <br/> <a href="javascript: document.getElementById('jun').innerHTML=..;void(0)"> Add $1000 for junior staff </a> <br/> <a href="javascript: document.getElementById('sen').innerHTML=..;void(0)"> Add $1000 for senior staff </a> <br/> <a href="javascript: document.getElementById('jun').innerHTML=..; document.getElementById('sen').innerHTML=..; void(0)"> Add $1000 for all staff </a> </BODY> </HTML> The complete code is given at the course web. Lec02_Slide16_Salary.html • This applicationis simple. • Can you • Explain the given code? • Fill in the missing code?

  17. Lec02_Slide17_Salary_3Functions.html <HTML> <HEAD> <TITLE>Salary</TITLE> <script language=javascript> function addJun1000() { document.getElementById('jun').innerHTML=..; } function addSen1000() { document.getElementById('sen').innerHTML=..; } function addAll1000() { document.getElementById('jun').innerHTML=..; document.getElementById('sen').innerHTML=..; } </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/> <br/> <a href="javascript:addJun1000()"> Add $1000 for junior staff </a> <br/> <a href="javascript:addSen1000()"> Add $1000 for senior staff </a> <br/> <a href="javascript:addAll1000()"> Add $1000 for all staff </a> </BODY> </HTML> Introduction to Functions Now the previous example is rewritten with 3 functions. (See explanation on next page.)

  18. Introduction to Functions 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 functionas: • 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 <script..> ..</script>. • 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. Introduction to Functions Lec02_Slide19_Salary_2Functions.html <HTML> <HEAD> <TITLE>Salary</TITLE> <script language=javascript> function addJun1000() { document.getElementById('jun').innerHTML=..; } function addSen1000() { document.getElementById('sen').innerHTML=..; } </script> </HEAD> <BODY> .. <a href="javascript:addJun1000()"> Add $1000 for junior staff </a> <br/> <a href="javascript:addSen1000()"> Add $1000 for senior staff </a> <br/> <a href="javascript:addJun1000();addSen1000();"> Add $1000 for all staff </a> </BODY> </HTML> Introduction to Functions The code below rewrites the previous example with 2 functions. -- Just an alternative to Lec02_Slide17_Salary_3Functions.html The addAll1000 function is removed Apply 2 functions here. • We can reuse a function again whenever needed. • This is an important advantage of writing functions.

  20. 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

More Related