Client-Side Web Application Development with JavaScript

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
The Web Warrior Guide to Web Design Technologies
Client-Side Web Application Development with Java ISYS 350.
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
JavaScript Forms Form Validation Cookies CGI Programs.
Web Basics ISYS546. Basic Tools Web server –Default directory, default home page –Virtual directory Web page editor –Front Page Web page languages –HTML,
Information Technology Center Hany Abdelwahab Computer Specialist.
Web Basics ISYS546. Basic Tools Web Server –Default directory, default home page –Virtual directory Web Page Editor –Front Page Web Languages –HTML, XML.
Client Side Scripting BICS546. Client-Side vs Server-Side Scripting Client-side scripting: –The browser requests a page. –The server sends the page to.
Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: – Standard.
Web Page Introduction. What is a web page? A web page is a text file containing markup language tags. –A markup language combines text and extra information.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
CST JavaScript Validating Form Data with JavaScript.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
JAVASCRIPT HOW TO PROGRAM -2 DR. JOHN P. ABRAHAM UTPA.
CO1552 Web Application Development HTML Forms. Websites can be made more interactive by providing facilities for users to provide data To get user entered.
JavaScript - Document Object Model. Bhawna Mallick 2 Unit Plan What is DOM and its use? Hierarchy of DOM objects. Reflection of these objects in an HTML.
Introduction to JavaScript Dr. John P. Abraham University of Texas – Pan American.
Client-Side Web Application Development with JavaScript ISYS 350.
JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
WEEK 3 AND 4 USING CLIENT-SIDE SCRIPTS TO ENHANCE WEB APPLICATIONS.
Execution Environment for JavaScript " Java Script Window object represents the window in which the browser displays documents. " The Window object provides.
JavaScript Part 1.
Server-Side Scripting with Java Server Page, JSP ISYS 350.
Web Page Introduction. What is a web page? A web page is a text file containing markup language tags. –A markup language combines text and extra information.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
Javascript. Outline Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML)
Server-Side Scripting with Java Server Page, JSP ISYS 350.
Chapter 8 Cookies And Security JavaScript, Third Edition.
Tutorial 8 Programming with ActionScript 3.0. XP Objectives Review the basics of ActionScript programming Compare ActionScript 2.0 and ActionScript 3.0.
Using Client-Side Scripts to Enhance Web Applications 1.
Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC Winter 2004 Lecture 17.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
Website Development with PHP and MySQL Saving Data.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
XHTML & Forms. PHP and the WWW PHP and HTML forms – Forms are the main way users can interact with your PHP scrip Typical usage of the form tag in HTML.
Client-Side Web Application Development with JavaScript ISYS 350.
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54
Client-Side Web Application Development with JavaScript ISYS 350.
Introduction to JavaScript CS101 Introduction to Computing.
JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.
HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.
XP Tutorial 8 Adding Interactivity with ActionScript.
Server-Side Scripting with PHP ISYS 475. PHP Manual Website
Introduction to JavaScript Objects, Properties, Methods.
JavaScript, Fourth Edition
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Making dynamic pages with javascript Lecture 1. Java script java versus javascript Javascript is a scripting language that will allow you to add real.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
Server-Side Scripting with Java Server Page, JSP ISYS 350.
Server-Side Scripting with Java Server Page, JSP ISYS 350.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Introduction to Javascript. What is javascript?  The most popular web scripting language in the world  Used to produce rich thin client web applications.
INTERNET APPLICATIONS CPIT405 Forms, Internal links, meta tags, search engine friendly websites.
Tutorial 6 Creating a Web Form
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
JavaScript Tutorial First lecture 19/2/2016. Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part.
XHTML Forms.
Chapter 5 Validating Form Data with JavaScript
In this session, you will learn to:
14 A Brief Look at JavaScript and jQuery.
Client-Side Web Application Development with JavaScript
Client-Side Web Application Development with JavaScript
Introduction to JavaScript
Presentation transcript:

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. Examples: Pages that display current date/time, visitor counter Yahoo home page Pages that display results based on a database query. Yahoo’s Finance/Enter symbol/Historical prices

Technologies for Creating Dynamic Pages Client-side technology HTML and Browser Document Object Model (DOM) JavaScript Server-side technology Microsoft .Net PHP Java Others

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>, <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 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: <div id="content"> <h1 class="center">

TABLE Tag <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>

FORM Tag Form attributes: 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. mame: Form’s name

When to use GET/POST method GET method: •When the request is for a page that gets data from a database server. POST method: • When the request is for a page that writes data to a database server. • When you don’t want to include the parameters in the URL for security reasons. • When you need to transfer more than 4 KB of data.

QueryString A QueryString is a set of name=value pairs appended to a target URL. It can be used to pass information from one webpage to another. Example: http://my.com/Target.htm?CustID=C1&Cname=Chao

Adding HTML Controls Tools/Palette/HTML, JSPCode Clips

Creating HTML Form: Double-click Form element

Create a Form Using NetBean

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 All buttons belong to a group 6. Add button Lable Type: Submit – submit to a server Standard – client-side 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" 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).

HTML Tags and Events http://www. w3schools Link <a> </a>: click, mouseOver, mouseOut Image <img>: abort(loading is interrupted), error, load. Area <area>: mouseOver, mouseOut Body <body>: blur, error, focus, load, unload Frameset: blur, error, focus, load, unload Frame: blur, focus Form: submit, reset Textbox, Text area: blur, focus, change, select Button, Radio button, check box: click List: blur, focus, change

Event Handler Event handler name: on + event name Calling a handler: Ex. onClick Calling a handler: onClick="CompSumJS()“ 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: " + eval(num1+num2)); window.alert("The sum is: " + sum); } --> </script> </head> <body> <form name="testText"> <input type="text" id="text1" name="test" /> <input type="button" value="showTest" name="btnTest" onClick="showSum()"/> </form> </body>

HTML 5 http://www.the-art-of-web.com/html/html5-form-validation/#.UdytIOLn_zc http://diveintohtml5.info/forms.html http://24ways.org/2009/have-a-field-day-with-html5-forms/

New INPUT types INPUT type="number" INPUT type="range” Other types: email, url, tel, etc Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">

'required' attribute Example: Your Name: <input type="text" name="name" required>

‘placeholder’ Attribute Placeholder attribute which lets us display a prompt or instructions inside the field. Example: Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">

‘pattern attribute’ The pattern attribute uses a regular expression to validate the format of input data. To accept text starting with http:// or https:// and at least one additional character: pattern="https?://.+“ Example: Website: <input type="url" name="website" required pattern="https?://.+">

Browser Object Model http://w3schools.com/jsref/default.asp

Window Object The Window object represents a Web browser window. Properties: window.status, window.defaultstatus window.document, window.history, window.location. Window.name Methods: window.open (“url”, “name”, Options) Options: menubar=no, status=no, toolbar=no, etc. window.close window.alert(“string”) window.prompt(“string”) Window.focus, Etc. Try statements at: http://w3schools.com/jsref/default.asp

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. Properties: Host, hostname, pathname Href: current page’s URL address To reload a page: location.reload() To open a page: Assign() Ex. location.assign(URL)

Testing <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function openNew(){ site=window.prompt("enter url:"); window.open (site); location.assign("http://localhost:8080/WebApplication5"); } </script> </head> <body> <p><input type="button" value="Button" name="B3" onclick="openNew()"></p> </body> </html>

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)

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”; Methods: Document.write (“string”) Document.open, close

Accessing 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://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(2); Pet[0]=“dog”; Pet[1]=“cat”; Pet[2]=“bird”;

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 1. while (condition) { statements; } 2. for (var I = 0; I<5;I=I+1){ Note: Use Break statement to exit loop earlier. Ex. Break ;

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; Document.write (Amount.toString()); Document.write (Amount.toFixed(2)); eval strVar = “5”; numVar = eval(strVar) Eval(Price*Qty)

Try Catch try { //Run some code here } catch(err) //Handle errors here

window.prompt: similar to VB’s inputBox 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 return value; } Note: 1. The arguments are optional. 2. The return statement is optional. A JavaScript function is not required to return a value.

Example: JavaScript to Compute the sum of two values function ComputeSum(){ n1=document.testForm.num1.value; n2=document.testForm.num2.value; document.testForm.valueSum.value=eval(n1)+eval(n2); } </script>

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(); } </script>

Using document.getElementById <form name="fvForm"> Enter PV: <input type="text" id ="PV" name="PV" value="" size="10" /><br> <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><br> 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" /> <input type="button" value="ComputeFV" name="btnCompute" onClick="ComputeFV()" />

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.fvForm.FV.value=fv.toString(); }

Years to Reach Goal

Form Code <form name="testForm"> PV: <input type="text" name="PV" value="" /><br><br> Rate: <input type="text" name="Rate" value="" /><br><br> Goal: <input type="text" name="Goal" value="" /><br><br> Year: <input type="text" name="Year" value="" /><br><br> <input type="button" value="Compute Year" name="btnCompute" onclick="ComputeYear()" /> </form>

Code Example <script type="text/javascript"> function ComputeYear(){ pv=eval(document.testForm.PV.value); rate=eval(document.testForm.Rate.value); goal=eval(document.testForm.Goal.value); fv=0; for (i=1; i<=9999; ++i){ fv=pv*Math.pow(1+rate,i); if(fv>=goal){ document.testForm.Year.value=i; break; } </script>

Using while loop year=0; while (fv<goal) { year=year+1; fv=pv*Math.pow(1+rate,year); if(fv>=goal) document.testForm.Year.value=year; break; }

Working with Table Straight Line Depreciation 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; 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); 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(); }