ILP J2EE Stream J2EE 08 Javascript V0.3

8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3

1/43

Introduction to JavaScriptVersion 1.0


2/43

September 3, 2009TCS Internal

What is Java Script? JavaScript is NOT Java. Developed by Netscape. Purpose: Execute on the client-side(browser)

Widely used within HTML pages, for client-side validation, etc.

It is similar to Java, but loosely typed data.

JavaScript is interpreted programminglanguage. Errors are identified by browsers.


3/43


JavaScript Within HTML page

JavaScript Page Content of the Page

ScriptDeclaration

Tag

JavaScript

Function


4/43


Data Types Numerical data

Integers Floating-point numbers

Text data

String Boolean data

True/false


5/43


Declaring variables Weekly typed language. Example:

var myname=david; var myint = 1234;


6/43


Operations Normal numerical calculations like any otherprogramming language is possible.

Example:var a = 10;

var b = 20;var c = a + b;

String operations are similar to Java.

Example:String s = one;String t = two;

String u = s + t; ( will result inonetwo


7/43


Native Objects Array

Arrays are treated as objects like in Java Multidimensional arrays are treated as

array of arrays.

Arrays can have holes. Means some elements in the array maybe empty.

Examples:var firstArray = new Array(); // creating anew array

var secondArray = new Array(Bob,Clinton, 123);

Arrays can hold

different type of data


8/43


9/43


Native Objects Math

Provides useful mathematical functions. Examples:

round()

floor() abs()


10/43


Native Objects Date

Handling date/colander related functions Examples:

getDate()

getDay() getMonth()


11/43


Browser Related Objects Window object

Location object History object Document object

Forms object Images object Links object

Navigator object Screen object


12/43

September 3, 2009RMIT - JavaScript Examples

JavaScript Examples


13/43

13September 3, 2009TCS Internal

Format The script must be between script tags:

Note the comments are used to preventproblems in old browsers


14/43


Input Outputvar celsius, fahrenheitcelsius = prompt ("Enter Temperature inCelsius", "20")

celsius = parseFloat (celsius)fahrenheit= celsius * 9.0 / 5.0 + 32.0document.write ("Temperature in Fahrenheit

is: ")document.writeln (fahrenheit)


15/43


Selection The if statement is from Java and C++:if (hours


16/43


While The while statement is from Java and C++:number = 1while (number


17/43


For The for statement is from Java and C++:var numberfor (number=1; number


18/43


Function It is common to put code in the headerinside of a function

function calculate ( ){ var celsius, fahrenheit

celsius = prompt ("Enter Temperature inCelsius", "20")celsius = parseFloat (celsius)

fahrenheit= celsius * 9.0 / 5.0 + 32.0document.write ("Temperature in Fahrenheitis: ")document.writeln (fahrenheit)

}


19/43


Function1 It is best to use arguments and a returnfunction calculate (celsius){

return (celsius * 9.0 / 5.0 + 32.0)

} To call function use:fahrenheit = calculate (celsius)


20/43


Math Math functions are like in Java They are messages sent to the class MathnumberOut = Math.sqrt (numberIn)


21/43


Repeat The iteration with test after is simulatedvar flag = truewhile (flag){

calculate()flag = confirm("Do you wish to do

another?")

} Note confirm dialog box


22/43


Datefunction getFullYear(){

var year = this.getYear()year += 1900

return year}


23/43


Date

function getActualMonth(){

var month = this.getMonth()

month ++return month}


24/43


Date Here are some more useful ones :function getCalendarDay ( ){ var day = this.getDay ( )

var days = new Array (7)days[0] = "Sunday"

days[1] = "Monday"days[2] = "Tuesday"days[3] = "Wednesday"days[4] = "Thursday"days[5] = "Friday"days[6] = "Saturday"return days [day]

}


25/43


Alert JavaScript also has a message box:

var stringstring = message

alert (string)


26/43


Browser Need to tell you about the properties of theobject document

document.writeln("Browser name: " +navigator.appName)

document.writeln("Browser version: " +navigator.appVersion) document.writeln("Browser platform: " +

navigator.platform) document.writeln("Browser plugins: " +

navigator.plugins)


27/43


Form1 This form uses a function invoked by abutton called name1function callAlert (form){ alert ("Your name is: "+

form.name1.value)}


28/43


Form2 This form uses a function invoked by abutton to populate the formfunction convertTemp (form){ var fahrenheit, celsius

celsius = parseFloat (form.celsius.value)fahrenheit = celsius * 9.0 / 5.0 + 32.0form.fahrenheit.value = fahrenheit

}


29/43


Form3

This form shows the mail form that will be used in the nextexamples

There is no JavaScript


30/43


Form4

This form shows the addition of a list box to themail form

There is still no JavaScriptInterest:

World Wide WebJava Programming

C++Programming Javascript

UML


31/43


Form5 This form uses a function invoked by ONSUBMIT =

return checkFields (form1)function checkFields(form){ var validFlag = true

for (var i = 0; i < 5; i++)

{ if (form.elements[i].value == null ||form.elements[i].value == ""){ validFlag = false

alert ("The " + form.elements[i].name+

" field is blank. Please enter avalue.")

break}

}


32/43


Form6 This form adds more advanced checking of

formif (parseInt (form.elements[1].value) < 21){ alert ("At :" + form.age.value + " you

are too young")validFlag = false}if ( ! ( form.gender[0].checked)&& !( form.gender[1].checked)){ alert ("Please check gender")

validFlag = false}


33/43


34/43


Frame Here is the frame set:

Demonstration of frames using Java

Script


35/43


Frame Here are the functions in the left frame

invoked by radio buttons and on load:function setButton(form){ form.button1[0].checked=true

}function opendoc1(){parent.frameRight.location.href="frameright1.htm"}function opendoc2(){


36/43


New Window

Upon clicking the Okay button, the pagelinks to another site:


37/43


Cookie A cookie is not something to eat

It is a text file on your c:\ drive written by afunction in JavaScript; for example:www.csupomona.edu

FALSE /C|/stumpf/javascript FALSE938049354 Title Mr

FALSE /C|/stumpf/javascript FALSE938129386 UserName Robert Stumpf


38/43


Cookie The critical parts are the cookie name and

cookie value, for example:

Title Mr

UserName Robert Stumpf


39/43


40/43


Cookie Checking a cookie:

function checkCookie ( ){ var title=null, userName=nullvar name, value, expiresvar path=null ,domain=null,secure=nullexpires = new Date ( );expires.setTime (expires.getTime ( ) + 24*60*60*365*1000) //Plus one yearname = "UserName"userName = getCookie(name)

if (userName == null)userName = prompt("Please Enter Your Name:","")value = userNamesetCookie (name,value,expires,path,domain,secure)return (title + " " + userName)

}


41/43


Password Checking a password:

function checkpw (form){ var passwordKeyed =form.passwordKeyed.value

var passwordCookie = getCookie("PassWord")if (passwordKeyed == passwordCookie)

parent.frameLeft.opendoc3 ( )else

alert ("Password did not match, tryagain.")}


42/43


Password Verifying a new password:

function checkpw (form){ var password1 = form.password1.value

var password2 = form.password2.valuevar name, value, expires, path=null ,domain=null,secure=nullexpires = new Date ( );expires.setTime (expires.getTime ( ) + 24*60*60*365*1000)if (password1 == password2){ name = "PassWord"

value = password1setCookie(name,value,expires,path,domain,secure)parent.frameLeft.opendoc3 ( )

}else

alert("Passwords did not match, try again.")}


43/43

Reference: Beginning JavaScript, 2 nd Edition, Paul

Wilton, Wrox Publishers, 2004.

Date post:	30-May-2018
Category:	Documents
Upload:	chacko-mathew
View:	230 times
Download:	0 times

ILP J2EE Stream J2EE 08 Javascript V0.3

Documents