Client-Side Web Application Development with JavaScript ISYS 350
Types of Web pages Static page: Dynamic page The contents of a web page is predefined by HTML tags and other mark up languages. Example: david chao’s home page. Dynamic page A web page includes contents produced by a programming language when the page is opened.
Technologies for Creating Dynamic Pages Client-side technology HTML Browser Document Object Model (DOM) JavaScript, JQuery Cascade Style Sheet, CSS Bootstrap: https://www.w3schools.com/bootstrap4/default.asp Server-side technology Microsoft .Net Java PHP Others: Node.js, a server-side JavaScript
Example of Client-side Page using HTML, DOM and JavaScript
HTML Introduction History: Standard HTML 5: <!DOCTYPE html> http://en.wikipedia.org/wiki/HTML Standard The World Wide Web Consortium (W3C) HTML 5: <!DOCTYPE html> Multimedia controls Video, audio, canvas Controls with build-in validation
Online Resources for Learning HTML w3schools.com http://www.w3schools.com/default.asp
HTML Tags (Elements) Heading section Body section <head>, <title>, <meta>, <script>, etc. Body section <body>, <div>, <p>, <h1> to <h6>, <a>, <br> Formatting: <b>, <I>, <u>, <center> Comment: <!-- comment --> List <ul> Image Table: <table>, <tr>: a new row in table, <td>: a new cell in a table row. Form: <form>, <input>, <select>
HTML Attributes (Properties) HTML elements can have attributes that provide additional information about an element. Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value“ Name and value are case-sensitive and lowercase is recommended. Examples: <form id=“tf” name="testForm"> <div id="content"> <h1 class="center"> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
FORM Tag For server-side form: Client-side form attributes: name: Form’s name, id For server-side form: action: Specify the URL of a program on a server or an email address to which a form’s data will be submitted. method: Get: the form’s data is appended to the URL specified by the Action attribute as a QueryString. Post: A preferred method for database processing. Form’s data is sent in the HTTP body.
A form may contains: Textbox Check box Listbox Radiobutton Button Etc.
Adding HTML Controls Tools/Palette/HTML, JSPCode Clips
Creating HTML Form: Double-click Form element
Create a Form Using NetBeans
Step by Step 7. Add <br> to start a new line 1. Add a form tag: Name property Action: server-side program; leave it blank for client-side 2. Add lables by typing 3. Add text input 4. Add dropdown list: Number of options 5. Add radiobutton Buttons of a group share the same Group Name 6. Add button Lable Type: Standard – client-side form to call a client-side click event procedure Submit – for server-side form to submit to a server 7. Add <br> to start a new line
Dropdown List Example <select name="Rate"> <option value=.04>4%</option> <option value=045>4.5%</option> <option value=.05 >5%</option> <option value=.055>5.5%</option> <option value=.06>6%</option> </select>
RadioButton Example: RadioButtons having the same name belong to one group <input type="radio" name="Year" value=10 />10 year<<br> <input type="radio" name="Year" value=15 />15 year<br> <input type="radio" name="Year" value=30 />30 year<br>
Note: We can assign an id to a HTML tag (element). <form name="fvForm" > Enter PV: <input id='PV' type="text" name="PV" value="" /><br> Select Rate: <select name="Rate"> <option value=0.04>4%</option> <option value=0.045>4.5%</option> <option value=0.05>5%</option> <option value=0.055>5.5%</option> <option value=0.06>6%</option> <option value=0.065>6.5%</option> <option value=0.07>7%</option> </select><br> Select Year: <br> <input type="radio" name="Year" value=10 />10 year<br> <input type="radio" name="Year" value=15 />15 year<br> <input type="radio" name="Year" value=30 />30 year<br> <br> Future Value: <input type="text" name="FV" /> <input type="button" value=“computeFV" name="btnCompute" onClick=“computeFV()" /> </form> Note: We can assign an id to a HTML tag (element).
Place Tags in a Table <table border="0"> <tbody> <tr> <td>Present value</td> <td><input type="text" name="pv" id="PV" value="" /></td> </tr> <td>Select rate</td> <td><select name="rate" id="Rate"> <option value=".04">4%</option> <option value=".05">5%</option> <option value=".06">6%</option> <option value=".07">7%</option> <option value=".08">8%</option> </select></td> <td>Select year</td> <td><input type="radio" name="year" id= "Year10" value="10" />10-year<br> <input type="radio" name="year" id="Year15" value="15" />15-year<br> <input type="radio" name="year" id="Year30" value="30" />30-year </td> <td>Future value</td> <td><input type="text" name="fv" id="FV" value="" /></td> <td></td> <td><input type="button" value="Comput FV" name="btnCompute" onclick="computeFV()" /></td> </tbody> </table>
Table: Border=0
HTML Tags and Events http://www. w3schools Button, Radio button, check box: click event Others: Link <a> </a>: click, mouseOver, mouseOut Area <area>: mouseOver, mouseOut Body <body>: blur, error, focus, load, unload Form: submit, reset Textbox, Text area: blur, focus, change, select List: blur, focus, change
Event Handler Execute one statement: Event handler name: on + event name Ex. onclick Calling a handler: onclick="CompSumJS()“ Execute one statement: onclick="window.alert('you click me')" Note: single quote/double quote
Example of Event Handler <script > function showSum(){ num1=parseFloat(window.prompt("Enter Num1: ")); num2=parseFloat(window.prompt("Enter Num2: ")); sum=num1+num2; window.alert("The sum is: " + sum.toString()); } </script> </head> <body> <form name="testText"> <input type="button" value="showTest" name="btnTest" onclick="showSum()"/> </form> </body>
Leaving a textbox (blur event) <script> function myFunction() { alert("You just left the name box"); } </script> <body> Enter your name: <input type="text" name="fname" id="fname" onblur="myFunction()"><br><br> Enter your address:<input type="text"/> <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> </body>
Browser Object Model http://w3schools.com/jsref/default.asp
Window Object The Window object represents a Web browser window. Methods: window.open (“url”, “name”, Options) Options: menubar=no, status=no, toolbar=no, etc. window.close window.alert(“string”) Similar to C# messageBox.Show(“string”) window.prompt(“string”) present an input box for use to enter data Try statements at: http://www.w3schools.com/jsref/obj_window.asp
Document Object The document object represents the actual web page within the window. Properties: background, bgColor, fgColor, title, url, lastModified, domain, referrer, cookie, linkColor, etc. Ex. document.bgColor=“silver”;
Navigator Object The navigator object provides information about the browser. Properties: Navigator.appName:browser name Navigator.appCodeName: browser code name Navigator.appVersion Navigator.platform: the operating system in use.
Location Object To reload a page: Allows you to change to a new web page from within a script code. To reload a page: location.reload() To open a page: Assign() Ex. location.assign(URL)
History Object Maintain a history list of all the documents that have been opened during current session. Methods: history.back() history.forward() history.go(): ex. History.go(-2)
Use document object to access data entered on a form Using the future value form as an example: Form name: fvForm Textbox name: PV Dropdown list: Rate Radiobutton group name: Year
Accessing data entered on a form Textbox: document.fvForm.PV.value Dropdown list: document.fvForm.Rate.options[document.fvForm.Rate.selectedIndex].value Radiobuttons: if (document.fvForm.Year[0].checked) {myYear=10;} else if (document.fvForm.Year[1].checked) {myYear=15;} else {myYear=30;}
CheckBox document.LoanForm.checkBox1.checked
Alternative way using the id attribute document.getElementById("PV").value
JavaScript Reference http://www.w3schools.com/js/default.asp
Client Side Script <script> …… ..statements </script>
JavaScript Variable Declaration var intrate, term, amount; Data Type: Variant - a variable’s data type is determined when it is initialized to its first value. Variable scope: Local: Variables declared in a function or procedure. Global: Variables declared in the heading section, but not in a function or procedure. Variable name is case-sensitive. Note: We can use a variable without declare it.
Statements Statements: Comments: End with “;” Block of code: { } Single-line comment: //comment Block comment: /* comment comment */
Arrays var arrayName = new Array(array size); var Pet = new Array(3); Pet[0]=“dog”; Pet[1]=“cat”; Pet[2]=“bird”; Note: Optionally, it is not require to declare array size. var names=new Array(); names[0]="peter"; names[1]="paul"; names[2]="mary";
Use [] to define array var names=[]; names[0]=“peter”; names[1]=“paul”; names[2]=“mary”; Or simply: Names=[“peter”,”paul”,”mary”]
Operators Arithmetic operators: Comparison operators: +, -, *, / Math.pow(x,y), etc. Math is an object with many methods such as round(x), random(), sqrt(x), ceil(x), floor(x), etc. Note: “pow” has a lowercase p. Comparison operators: = = , !=, <, >, <=, >= Logical operators: &&, ||, !
Formula to Expression Math.pow(A,B) Math.pow(X/Y,A/B)
IF Statements if (document.fvForm.Year[0].checked) {myYear=10;} JS: if (condition) { statements; } else { if (document.fvForm.Year[0].checked) {myYear=10;} else if (document.fvForm.Year[1].checked) {myYear=15;} else {myYear=30;}
Switch Case Statements switch(varable name) { case value1: statements; break; case value2: … default: }
Loop Structures while (condition) { statements; } for (var I = 0; I<5;I=I+1) Note: Use Break statement to exit loop earlier. Ex. break ; //lowercase “b”
JavaScript’s Conversion Functions parseFloat:for conversion to a floating-point number: Ex. parseFloat('77.3') -> 77.3 parseInt: for string-to-integer conversion Ex. parseInt('123.45') -> 123 toString(), toFixed(n) example: Price=5; Qty=10; Amount=Price*Qty; window.alert (Amount.toString()); window.alert (Amount.toFixed(2)); //Show 2 decimals eval strVar = “5”; numVar = eval(strVar)
Try Catch try { //Run some code here } catch(err) //Handle errors here
window. prompt: present an input box for user to enter data window window.prompt: present an input box for user to enter data window.alert: like MessageBox function showSum(){ num1=parseFloat(window.prompt("Enter Num1: ")); num2=parseFloat(window.prompt("Enter Num2: ")); sum=num1+num2; window.alert("The sum is: " + eval(num1+num2)); window.alert("The sum is: " + sum); }
JavaScript Functions Defining functions function functionName(arg1,..,argN){ Statements; return valueToReturn; } Note: 1. The arguments are optional. 2. The return statement is optional. A JavaScriopt function is not required to return a value. 3. Typically the JavaScript functions are embedded in the <head> section.
Example: JavaScript to Compute the sum of two values function computeSum(){ n1=document.sumForm.num1.value; n2=document.sumForm.num2.value; document.sumForm.sum.value=eval(n1)+eval(n2); //document.sumForm.sum.value=parseFloat(n1)+parseFloat(n2); } </script> </head> <body> <form name="sumForm"> Enter Num1: <input type="text" name="num1" id="num1" required /><br><br> Enter Num2: <input type="text" name="num2" id="num2" value="" /><br><br> Sum: <input type="text" name="sum" id="sum" value="" /><br><br> <input type="button" value="Compute Sum" name="btnCompute" onclick="computeSum()" /> </form> </body>
JavaScript to compute the future value
Note: We can assign an id to a HTML tag (element). <form name="fvForm" action=""> Enter PV: <input id='PV' type="text" name="PV" value="" /><br> Select Rate: <select name="Rate"> <option value=0.04>4%</option> <option value=0.045>4.5%</option> <option value=0.05>5%</option> <option value=0.055>5.5%</option> <option value=0.06>6%</option> <option value=0.065>6.5%</option> <option value=0.07>7%</option> </select><br> Select Year: <br> <input type="radio" name="Year" value=10 />10 year<br> <input type="radio" name="Year" value=15 />15 year<br> <input type="radio" name="Year" value=30 />30 year<br> <br> Future Value: <input type="text" name="FV" /> <input type="button" value="ComputeFV" name="btnCompute" onClick="ComputeFV()" /> </form> Note: We can assign an id to a HTML tag (element).
Code Example <script> function ComputeFV(){ //myPV=eval(document.fvForm.PV.value); myPV=parseFloat(document.fvForm.PV.value); //myRate=eval(document.fvForm.Rate.options[document.fvForm.Rate.selectedIndex].value); myRate=parseFloat(document.fvForm.Rate.options[document.fvForm.Rate.selectedIndex].value); if (document.fvForm.Year[0].checked) {myYear=10;} else if (document.fvForm.Year[1].checked) {myYear=15;} else {myYear=30;} fv=myPV*Math.pow(1+myRate,myYear); document.fvForm.FV.value=fv.toString(); //document.fvForm.FV.value="$" + fv.toFixed(2); } </script> Note: To show currency format: "$" + fv.toFixed(2)
Using document.getElementById <form name="fvForm" action=""> Enter PV: <input type="text" id="PV" name="PV" value="" /><br> Select Rate: <select name="Rate" id="Rate"> <option value=0.04>4%</option> <option value=0.045>4.5%</option> <option value=0.05>5%</option> <option value=0.055>5.5%</option> <option value=0.06>6%</option> <option value=0.065>6.5%</option> <option value=0.07>7%</option> </select><br> Select Year: <br> <input type="radio" name="Year" id="Year10" value=10 />10 year<br> <input type="radio" name="Year" id="Year15" value=15 />15 year<br> <input type="radio" name="Year" id="Year30" value=30 />30 year<br> <br> Future Value: <input type="text" id="FV" name="FV" /> <input type="button" value="ComputeFV" name="btnCompute" onClick=“computeFV()" /> <br><br> <input type="button" value="Compute Using ById" name="btnComputeID" onclick="ComputeFVID()"/> </form>
<script> function computeFV(){ //myPV=eval(document.fvForm.PV.value); myPV=parseFloat(document.getElementById("PV").value); myRate=parseFloat(document.getElementById("Rate").value); if (document.getElementById("Year10").checked) {myYear=10;} else if (document.getElementById("Year15").checked) {myYear=15;} else {myYear=30;} fv=myPV*Math.pow(1+myRate,myYear); document.getElementById("FV").value=fv.toString(); //document.fvForm.FV.value=fv.toString(); } </script>
When tags are placed in a Table, use getElementById <table border="0"> <tbody> <tr> <td>Present value</td> <td><input type="text" name="pv" id="PV" value="" /></td> </tr> <td>Select rate</td> <td><select name="rate" id="Rate"> <option value=".04">4%</option> <option value=".05">5%</option> <option value=".06">6%</option> <option value=".07">7%</option> <option value=".08">8%</option> </select></td> <td>Select year</td> <td><input type="radio" name="year" id= "Year10" value="10" />10-year<br> <input type="radio" name="year" id="Year15" value="15" />15-year<br> <input type="radio" name="year" id="Year30" value="30" />30-year </td> <td>Future value</td> <td><input type="text" name="fv" id="FV" value="" /></td> <td></td> <td><input type="button" value="Comput FV" name="btnCompute" onclick="computeFV()" /></td> </tbody> </table>
Embed JavaScript Code within <body> Compute and display result with a control Use document.write to add dynamic content <body> The current date and time is: <input type="text" name="txtTime" value="" size="60" id="timeBox"/><br><br> <script> document.getElementById("timeBox").value = Date(); document.write("The current date and time is:" + Date()); </script> </body>
Years to Reach Goal
Form Code <form name="testForm"> PV: <input type="text" name="PV" id="PV" value="" /><br><br> Rate: <input type="text" name="Rate" id="Rate" value="" /><br><br> Goal: <input type="text" name="Goal" id="Goal" value="" /><br><br> Year: <input type="text" name="Year" id="Year" value="" /><br><br> <input type="button" value="Compute Year" name="btnCompute" onclick="computeYear()"/> </form>
Using while loop function computeYear(){ //pv=eval(document.testForm.PV.value); pv=parseFloat(document.getElementById("PV").value); //rate=eval(document.testForm.Rate.value); rate=parseFloat(document.getElementById("Rate").value); //goal=eval(document.testForm.Goal.value); goal=parseFloat(document.getElementById("Goal").value); year=0; fv=pv; while (fv<goal) { year=year+1; fv=pv*Math.pow(1+rate,year); } //document.testForm.Year.value=year; document.getElementById("Year").value=year.toString();
Code Example <script> function computeYear(){ pv=eval(document.testForm.PV.value); rate=eval(document.testForm.Rate.value); goal=eval(document.testForm.Goal.value); for (i=0; true; ++i){ fv=pv*Math.pow(1+rate,i); if(fv>=goal){ document.testForm.Year.value=i; break; } </script>
Working with Table Straight Line Depreciation Table
TABLE Tag example <table id="depTable" border="1" width="400"> <thead> <tr> <th>Year</th> <th>Value at BeginYr</th> <th>Dep During Yr</th> <th>Total to EndOfYr</th> </tr> </thead> <tbody> <td>1</td> <td>2000</td> <td>400</td> </tbody> </table>
HTML Table Tag <Table> : id and name attributes <thead>: Table Heading section <tr>: new row <th>: column heading <tbody>: data rows
HTML Form Code <body> Straight Line Depreciation Table <form name="depForm"> Enter Property Value: <input type="text" name="pValue" value="" /><br> Enter Property Life: <input type="text" name="pLife" value="" /><br> <input type="button" value="Show Table" name="btnShowTable" onclick="showTable()" /> </form> <table id="depTable" border="1" width="400" cellspacing="1"> <thead> <tr> <th>Year</th> <th>Value at BeginYr</th> <th>Dep During Yr</th> <th>Total to EndOfYr</th> </tr> </thead> <tbody> </tbody> </table> </body>
Table/Row/Cell Object Table object: Properties: rows: collection of data rows (including the header row) rows.length: number of rows 0-based index Methods: InsertRow(index) deleteRow(index) Data Row object method: insertCell(index) Cell object: innerHTML property: cell’s data
HTML element’s innerHTML property Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages. Assigning a value: document.getElementById(“p”).innerHTML = 5;
function showTable(){ value=eval(document.depForm.pValue.value); life=eval(document.depForm.pLife.value); depreciation = value / life; var table = document.getElementById('depTable'); var totalDepreciation=0; /* Delete rows backward; note the rows.length property changed when a row is deleted. */ for(var i = table.rows.length - 1; i > 0; i--) { table.deleteRow(i); } for (count = 1; count <= life; count++) var rowCount = table.rows.length; var row = table.insertRow(rowCount); /* declare variable representing an element */ var cell0 = row.insertCell(0); cell0.innerHTML=count; var cell1 = row.insertCell(1); cell1.innerHTML="$" + value.toFixed(2); var cell2 = row.insertCell(2); cell2.innerHTML="$" + depreciation.toFixed(2); totalDepreciation += depreciation; var cell3 = row.insertCell(3); cell3.innerHTML="$" + totalDepreciation.toFixed(2); value -= depreciation;
Validating Data: The property value and life boxes cannot be blank <script > function Validating(){ var Valid; Valid=true; if (document.depForm.pValue.value=="" ||document.depForm.pLife.value=="") {Valid=false;} if (Valid==false) {alert("Property value or life cannot contain blank");} else {showTable();} } </script> Note: the button’s onClick event will call the Validating function: <input type="button" value="Show Table" name="btnShowTable" onclick="Validating()" />
Useful function for Validation isNaN(): The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value is NaN, and false if not.
isNaN example function Validating(){ var Valid, Valid2; Valid=true; if (document.depForm.pValue.value=="" ||document.depForm.pLife.value=="") {Valid=false;} if (isNaN(document.depForm.pValue.value) ||isNaN(document.depForm.pLife.value)) {Valid2=false;} if (Valid==false) {alert("Property value or life cannot contain blank");} if (Valid2==false) {alert("Enter digits only");} if (Valid && Valid2) { showTable(); }
Array and document.write demo <form name="fvForm"> Enter PV: <input type="text" id ="PV" name="PV" value="" size="10" /><br> <script> rateValues=[.04,.05,.06,.07,.08]; rateDisplay=["4%","5%","6%","7%","8%"]; document.write("<select name='Rate' id='Rate'>"); for (i=0;i<=rateValues.length-1;i++) { document.write("<option value='"+ rateValues[i] + "'>" + rateDisplay[i]+"</option>"); } document.write("</select><br>"); </script> Select Year: <br> <input type="radio" name="Year" value=10 id="Year10" />10 year<br> <input type="radio" name="Year" value=15 id="Year15" />15 year<br> <input type="radio" name="Year" value=30 id="Year30" />30 year<br> <br> Future Value: <input type="text" name="FV" id="FV" /> <input type="button" value="ComputeFV" name="btnCompute" onClick="ComputeFV()" /> </form>
HTML DOM getElementsByTagName() Method Example: https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp var x = document.getElementsByTagName("LI"); Note: x is an array because TagName may not be unique.