Presentation is loading. Please wait.

Presentation is loading. Please wait.

Client-Side Web Application Development with Java ISYS 350.

Similar presentations


Presentation on theme: "Client-Side Web Application Development with Java ISYS 350."— Presentation transcript:

1 Client-Side Web Application Development with Java ISYS 350

2 Types of Web pages Static 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

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

4 Example of Client-side Page using HTML, DOM and JavaScript

5 HTML Introduction http://www.w3schools.com/default.asp Heading section –,,,, etc. Body section –,, to,, – Formatting:,,, – Comment: – List – Image – Table:, : a new row in table, : a new cell in a table row. – Form:,,,

6 TABLE Tag

7 FORM Tag Form attribute: – 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. – Name: Form’s name

8 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. To create a QueryString: – Add a question mark (?) immediately after a URL. – Followed by name=value pairs separated by ampersands (&). Example: http://my.com/Target.htm?CustID=C1&Cname=Chao

9 NetBeans IDE A free, open-source Integrated Development Environment for software developers. You get all the tools you need to create professional desktop, enterprise, web, and mobile applications. Support many languages: – Java, PHP, C++, Ruby Support many platforms: – Windows, Linux, Mac OS X and Solaris

10 Creating a New Web Project File/New Project/Java Web – Web Application Folders of a web project: – Web – Src

11 Create a Form Right Click Project’s Web folder and choose: – New/HTML Window/Palette to access the HTML support From HTML Palette: – Drag Form and drop it between Body tag – Add Text input – Add Button Note: Use to start a new line or use Table to align controls.

12 Dropdown List Example 4% 4.5% 5% 5.5% 6%

13 RadioButton Example: RadioButtons having the same name belong to one group 10-year 15-year 30-year

14 Client Side Script

15 HTML Tags and Events Link : click, mouseOver, mouseOut Image : abort(loading is interrupted), error, load. Area : mouseOver, mouseOut 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

16 Event Handler Event handler name: on + event name – Ex. onClick Calling a handler: – onClick="CompSumJS()“ – onClick="window.alert('you click me')" – Note: single quote/double quote

17 Example Value1: Value2: Sum:

18 Document Object Model

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

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

21 Location Object Allows you to change to a new web page from within a script code. Properties: – Host, hostname, pathname – Href: full URL address – Search: A URL’s queryString Methods: – location.reload() To open a page:location.href = “URL”

22 Testing Location Object function openNew(){ site=window.prompt("enter url:"); window.open (site); location.href=“FVForm.htm"; }

23 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) Demo: testDocOpenClose.htm

24 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

25 Accessing data entered on a form Textbox: – document.LoanForm.Loan.value Dropdown list: – document.LoanForm.Rate.options[document.Loa nForm.Rate.selectedIndex].value) Radiobuttons: – document.LoanForm.Term[0].checked checkBox: – document.LoanForm.checkBox1.checked

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

27 Statements Statements: – End with “;” – Block of code: { } Comments: – Single-line comment: //comment – Block comment: /* comment comment */

28 Arrays var arrayName = new Array(array size); var Pet = new Array(2); Pet[0]=“dog”; Pet[1]=“cat”; Pet[2]=“bird”;

29 Operators Arithmetic 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. Comparison operators: = =, !=,, = Logical operators: &&, ||, !

30 Formula to Expression

31 IF Statements JS:if (condition) { statements; } else { statements; } if (document.LoanForm.Term[0].checked) {myTerm=10;} else if (document.LoanForm.Term[1].checked) {myTerm=15;} else {myTerm=30;}

32 Switch Case Statements switch(varable name) { case value1: statements; break; case value2: statements; break; … default: statements; break; }

33 Loop Structures 1.while (condition) { statements; } 2. for (var I = 0; I<5;I=I+1){ statements; } Note: Use Break statement to exit loop earlier. Ex. Break ;

34 JavaScript’s Conversion Functions toString() example: Price=5; Qty=10; Amount=Price*Qty; Document.write (Amount.toString()); eval strVar = “5”; numVar = eval(strVar)

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

36 Example: JavaScript to Compute the sum of two values

37 JavaScript to compute the future value

38 Form Enter Present Value: Select interest rate: 4% 4.5% 5% 5.5% 6% 6.5% 7% Select year: 10-year 15-year 30-year Future value is:

39 Code Example

40 Years to Reach Goal

41 Code Example

42 Validating Data: The two boxes cannot be blank


Download ppt "Client-Side Web Application Development with Java ISYS 350."

Similar presentations


Ads by Google