Java Script Session1 INTRODUCTION. Session Objectives Describe JavaScript Differentiate between...

Java ScriptSession1

INTRODUCTION

Session Objectives

Describe JavaScript

Differentiate between Client-Side and Server-

Side Applications

Differentiate between JavaScript and Java

Integrate JavaScript in HTML

What is JavaScript (1)

A scripting language that can be used to

create client-side scripts and server-side

scripts

JavaScript makes it easier to create

interactive Web pages.

What is JavaScript (2)

You can insert JavaScript statements

directly into an HTML page.

JavaScript statements can recognize

and respond to user events - - mouse

clicks, or system generated events - -

page resizing, and so on.

Versions of JavaScriptVersion Browser Support

Javascript 1.0 Navigator 2.0

JavaScript 1.1 Navigator 3.0

JavaScript 1.2 Navigator 4.0-5.0

JavaScript 1.3 Navigator 4.06-4.5

Client-Side and Server-Side Applications JavaScript can be used to write both client-

side and server-side applications. Client

applications run in a browser, such as

Netscape Navigator or Internet Explorer, and

server applications run on a Web server, such

as Microsoft’s Internet Information Server or

Netscape Enterprise Server.

Java Script in a Browser (1) When the client requests an HTML page that

includes a client-side script, the server forwards the full content of the HTML document - - the JavaScript statements and the HTML content.

<HTML>

<HEAD>

<TITLE>Have Fun</TITLE>

<SCRIPT LANGUAGE=”JavaScript”>

Java Script in a Browser (2)alert(“Welcome to the world of JavaScript”);

</SCRIPT>

</HEAD>

</HTML>

Java Script in a Browser (3)

Using JavaScript

JavaScript on a Web Server (1)

Server-side statements can be used to:

connect to databases

share information across users of an application

access the file system on the server

JavaScript on a Web Server (2) The process of creating server-side

applications is thus a two-stage process:

The HTML pages containing both client-side and

server-side JavaScript statements are created along

with JavaScript files. All of these files are then

compiled into a single executable.

JavaScript on a Web Server (3)

When the client browser requests the

executable, the run-time engine executes the

server-side JavaScript statements and returns

the HTML page to the browser.

JavaScript and Java(1)

Java-enabled browser is not

automatically a JavaScript-enabled

browser

Java, developed by Sun Microsystems, is

a full-fledged object-oriented

programming language.

JavaScript and Java(2)

It can be used to create standalone

applications and applets. Applets are mini

applications, which are downloaded and

executed in the browser.

JavaScript, developed by Netscape, is an

object-based scripting language.

JavaScript and Java(3) While most Java syntax and basic control-

flow constructs are supported by

JavaScript, it does not have Java’s static

typing and strong type checking.

JavaScript cannot be used to create applets

or standalone applications.

JavaScript and Java(4) Java programs consist exclusively of classes

and their methods.

JavaScript consists of a small range of data

types representing numeric, Boolean, and

string values. JavaScript provides dynamic

inheritance.

JavaScript and Java(5) Functions in JavaScript need not have

special declarations. Functions can be

properties of objects, executing as

loosely typed methods.

Java code must be compiled before it is

executed.

Embedding JavaScript

You can insert JavaScript statements into an

HTML document in the following ways:

Embedding the statements directly in the document using

the <SCRIPT> tag.

Linking a JavaScript source file to the HTML document.

Embedding JavaScript (1) Using JavaScript expressions within HTML

tag attribute values.

As event handlers within certain other HTML

tags.

Using the SCRIPT tag(1) JavaScript code is typically embedded

into an HTML document using the

SCRIPT tag. You can embed several

scripts into a single document, provided

you enclose each script with a SCRIPT

tag.

Using the SCRIPT tag(2)

The format is:

<script language=”JavaScript”>

JavaScript statements

</script>

Using the SCRIPT tag(3) JavaScript statements must be terminated with a

semi-colon (;).<html>

<head>

<script language = “JavaScript”>

document.write(“Welcome to the world of JavaScript”);

</script>

</head>

<body>

<p> Enjoy learning

<\body></html>

Using an External file(1) You can also link an external text file

containing JavaScript code to an HTML

document. The SRC (source) attribute of

the SCRIPT tag can be used to include the

external file.

Using an External file(2)

You can specify absolute and relative

pathnames to the SRC attribute.

<scriptlanguage=”JavaScript”

src=”filename.js”>

The external file is a text file containing JavaScript code, and whose filename ends with the extension “.js”.

Using an External file(3) The .js suffix must be mapped by the server to

the MIME type application/x-javascript. The

server then sends it back in the HTTP header.

The suffix can be mapped to the MIME type by

adding the following line to the mime.types file

in the server’s config directory.

Using <Noscript>(1) If the browser does not support JavaScript, you

can make use of the <NOSCRIPT> tag. The

browser will display HTML enclosed within a

<NOSCRIPT> tag in plain text. Browsers that

support JavaScript ignore the code within this

tag.

Using <Noscript>(2)

The following example shows a <NOSCRIPT> tag.

<HTML>

<HEAD>

<SCRIPT>

document.write(“Having fun”);

</SCRIPT> </HEAD>

Using <Noscript>(3)

<BODY>

<NOSCRIPT>

<P>The browser does not support

JavaScript<BR>

<A

HREF=”http://www.someserver/default.html”

>Click Here</A>

Using <Noscript>(4)

<P>If your browser supports JavaScript, check

the browser configuration to see if it is

enabled.

</NOSCRIPT>

</BODY>

</HTML>

Using <Noscript>(5)

Using NOSCRIPT

Displaying Information(1) Using write and writeln

object.write(string)

<HTML>

<HEAD>

<TITLE>Using Methods</TITLE>

<SCRIPT LANGUAGE = “JavaScript”>

document.write (“Are you having fun?”)

</SCRIPT>

</HEAD>

</HTML>

Displaying Information(2)object.writeln(string)

<HTML>

<HEAD>


function doloop() {

var String1 = ‘<hr align=”center” width=’;

document.open();

Displaying Information(3)for (var size = 5; size <= 100; size+=5)

document.writeln(String1 + size + ‘%”>’);

document.close();

}

</SCRIPT></HEAD>

<BODY>

<FORM>

<INPUT type=”button” value=”Test the loop” onclick = “doloop()” > </FORM></BODY>

</HTML>

Using Alert(1)object.alert([message])

<HTML>

<HEAD>

<SCRIPT LANGUAGE = “Javascript”>

alert (“Click OK to reboot the computer”);

</SCRIPT>

</HEAD>

</HTML>

Using Alert(2)

Staying Alert

Using Confirm The confirm method is used to display a message with

OK and Cancel buttons.object.confirm([message])

<HTML>

<HEAD>

<SCRIPT LANGUAGE = “Javascript”>

confirm (“Do you want to continue?”);

</SCRIPT>

</HEAD>

</HTML>

Using Prompts The prompt method is used to display a

message box to accept user input.object.prompt([message[, inputDefault]])

where

message - - is the string to be displayed. This is optional.

Inputdefault - - is the string or integer that represents the default value of the input field.

Session 2

Data types and Operators

Session Objectives List different data types available in JavaScript

Numeric – Integers and Floating-point Numbers

Alpha numeric – Strings Boolean – TRUE or FALSE

Apply basic arithmetic and assignment operators Use data declaration and assignment statements Type casting in JavaScript

Data types Every data used in program should be

declared first to be of a particular type

10, - 67,14.45, -454.45

Jack, michal and joe

TRUE, FALSENames

Boolean values

Numbers

Number

Comprises of Numeric Data

and can be classified as

Integers ( without decimals)Eg : 123, 5040, -121

Floating- point ( with decimals)Eg : 23.45 345.60

IntegersNumber system

Base Representation Example

Decimal 10 Sequence of digits ( 0 – 9) 35, -63

Octal 8 Sequence of digits ( 0 – 7) with a leading 0

0377 0568

Hexa 16 Sequence of digits ( 0 – 9, A - F) With a leading 0X

0XABC0X123

Floating point Numbers Represent fractional numbers and

can be positive and negative integers with exponents

Floating points numbers can be positive and negative

Example : 47.50 -123.45. 12e-2 ( 1/ 100)

Boolean Value Results from comparison

operation returns either a TRUE or FALSE.

Eg : is 10 < 20

Returns the value True

Is Night longer than Day?

Returns the value False

is 10 < 20

True ? False?

String

In JavaScript strings are represented by data enclosed within ‘’ or “” and can contain Numbers ( 0 – 9 ) Alphabets ( a – z) and ( A – Z ) Special characters like -, #, $, * Blank spaces

Eg :

“ABC 12345” , ‘John Martin’

String with Quotes

It can include ‘’ ( single quotes ) within double quotes and double quotes “ “ enclosed within single quotes

“ John D’silva” and

‘string to display double quotes ( “” ) ’

Escape characters are used to represent double quotes with double quotes and single quotes within single quotes

“ Double Quotes \“\” ”

‘Single Quotes \‘\’ ’

List of Escape characters \ ’ \ ” \ \ \ r \ f \ n \ b \ t

Single Quote Double Quote Back Slash Carriage Return Form Feed New Line Back Space Tab

Escape sequences should be used only with <PRE> </PRE> tag.

Variable Declaration Variables can be declared as follows

Declaring a single variable in JavaScript

var sum ; Declaring more than one variable in JavaScript,

using a single declaration statement

var sum, average,result ;

Where sum, average and result are

variables.

Variable Initialization Variables can be initalized in two ways

; During Declaration. Var sum = 0

0 is assigned to variable sum

Var name = ‘Smith’Name ‘Smith’ is assigned to variable name

After Declarationvar sum Sum = 0

Displaying Variable ContentsHow much money do I have ?

VALUE = ?

In JavaScript document.write ( ) is used

for displaying the contents of a variable

Eg :

var balance

balance = $22

document.write(“Current Balance is = ”

Output + balance)

Current Balance is = $22

JavaScript Statements

Every JavaScript program is made up of several instructions.

Each instruction is called a statement. Statements are present as a block enclosed with

{ and } brackets.

Types of Statements Assignment statements

Data declaration statements

Conditional statements

Loop statements

Assignment Statement Used for assigning values to variables. Expression on the right side of the = sign is

evaluated and assigned to the variable on the left

Example : A = B * 10 sum = sum + total

Operator & Operand Operator : acts upon values in

an arithmetic expression to produce result.

Operand : Values on which Operators act

Types of Operator : Binary Operators Unary Operators Assignment Operator

-

Average=(a+ b) / 2

Amt = Rate * qty

Operators Used with values to form mathematical

expression. Types of operators

Binary unary

Binary operators takes two operands List of Binary operators

+ ( add ) - ( minus ) * ( asterisk) / ( Division)

%

Assignment Operator

= is known as the assignment operator It is a Binary operator Used in expression to assign values to variables. Assigns the value of the right hand side operand /

expression to the operand on its left

Eg :Num1 = 2

Str1 = “JavaScript”

Result = true

Compound Assignment Operators Assignment operator can be used along with

other Binary Arithmetic operators

Operator Usage Inference+= A+= B A = A + B-= A-=B A = A – B*= A*=B A = A * B/= A /= B A = A / B

Unary Operator Takes one operand only ++ and -- are unary operators

Eg : A = 10 A ++ is similar to A = A + 1 as it increases the

value of A by 1. A - - is similar to A = A – 1 as it decreases the

value of A by 1.

Unary Operator [Contd…] Increment Operator can be used in two

ways A = 10 Pre-increment

++a and -- a are used to change the value of a before it is used in expression

Post-increment A++ and A - - are is used to change the value of

A after it is used with the current value of A.

The same is applied to decrement operator

Negation & Modulus operator

Negation (-) is used to represent negative values

Eg : -10, -13.45

Modulus ( % ) operator returns the remainder of a division operation to the variable.

Eg : Num = 10

Ans = Num % 3

Value 1 is assigned to the variable Ans

Type casting Automatic conversion of one type of data to another type (

when used in an expression) is called type casting.Eg :

Ans = “ cost of fruits = “+ 10

“cost of fruits = 10” gets stored in variable Ans

Num = 10 + “12.5”

Evaluated to 22.5 and gets stored in variable Num.

Session 3

Operators And Control Statements

Session Objectives Explain operator precedence Apply logical and comparison operators Change operator precedence using

parenthesis Use bitwise, string, ternary and comma

operators Apply conditional statements – if, if-else

and nested if Identify the need for loops and apply them

Operators Operators are symbols used to

process data

Different types of process in which operators are used : Arithmetic Comparison Logical Text concatenation

Types of Operators

Logical

Comparison

Arithmetic

AND, OR & NOT

< > = <= >= == !=

+ - * / %

Used in any Arithmetic calculation

Used to compare two elements on its value

Complex Operations based on combination of comparison / condition

Precedence level Consider the eg.

Ans = 5 + 4 * 3

Pay = basic – tax + allowance An expression may have more

than one operator, precedence decides the order in which the operators are chosen for execution

When two operators are of same precedence occur in an equation then it is solved from left to right.

1 - Negation

2* / %

Multiplication Division

Modulus

3 + -

Addition Subtraction

Arithmetic Operators

Comparison Operators< Less than

<= Less than and Equal to

> Greater than

>= Greater than and Equal to

== Equal to

!= Not equal to

Logical Operators

Operator Symbol

AND &&

OR ||

NOT !

Logical Operator Precedence Table

• With equal precedence of Logical Operators in an expression, it gets resolved from right to left

Precedence Operator

1 NOT

2 AND

3 OR

To evaluate :

false OR true AND [true AND true]

Precedence Among Operators Any expression containing combination of all

operators, the precedence in which it gets processed is as follows :

Precedence Type of Operator

1 Arithmetic2 Comparison3 Logical

Changing Precedence Parenthesis ( ) has the highest level of precedence. The precedence of operators can be modified using

parenthesis ( ). Operator of lower precedence with parenthesis assume highest

precedence and gets executed first. In case of nested Parenthesis ( ( ( ) ) ) the inner most

parenthesis gets evaluated first. An expression consisting of many set of parenthesis gets

processed from left to right.

String Operator ‘ + ‘ Operator is used to concatenate strings.

Eg :

STR 1 = ‘ Java’

STR2 = ‘Script ’

STR3 = STR1 + STR2

JavaScript gets assigned to variable name STR3

Bitwise Operators

Bitwise operator processes data after converting number to its binary equivalent. (Bit wise representation).

Used to perform both Logical operations Shift operations

With bitwise data

Bitwise - Logical Operators

AND( NUM1 & NUM2)

Return 1 if both the operands are 1s.

OR( NUM1 | NUM2 )

Returns 1 if bits of either of the operand are 1s.

NOT ( ~ NUM1)

Reverses the bits of its operand ( from 0 to 1 and 1 to 0).

XOR ( NUM1 ^ NUM2)

Returns 1 if either of the bits in an operand is 1 but not both.

Bitwise - Shift Operators

Operator Operation Action Result<< Left shift

15 << 2 Shift the Bits by two positions towards left

00001111 00111100

>> Right Shift15 >> 3

Shift the Bits by three positions towards right

00001111 00000001

>>> Zero filled Right shift25 >>> 2

Shift the Bits by two positions towards right and fills it with zero.

00011001 00000110

Ternary Operator Evaluated based upon certain

condition It has a set of three operands.

The first operand is the condition to be evaluated Ans = ( Num1 > Num2 ) ? 10 : 20

The second operand is the value returned if the condition is true Ans is assigned the value 10.

The third operand is the value returned if the condition is false Ans is assigned the value 20.

If Num1 > Num2 variable name Ans gets 10 else 20 stored in it.

Comma (,) Operator The comma operator (,) evaluates two operands

and returns the value of the second operand.

Eg : a = 2

b = 3c = 4d = 5

x = ( a++ , c) * ( b++ , d) (x = c * d )

Value 20 is assigned to variable name x.

Typeof Operator Returns the string representing the type

of the operand used with it.Eg :Num1 = typeof( “JavaScript “)

Num1 is assigned string

Num2 = typeof(123)Num1 is assigned Number

Conditional Statement

Used in decision making.

Set of statements have to be executed based upon certain condition.

Conditional statement is used to change the flow of program execution.

If ( <condition> )Set of statements to

be executed if the condition is true

elseSet of statements to

be executed if the condition is false

NestedCondition Statements

If (condition 1 )If (condition 2 )

Statements to be executed if the condition is true

elsestatements to be executed if the condition is false

end if

elseIf (condition 3 )

Statements to be executed if the condition is true

endif

Condition 1 is true

Condition 1 is false

Condition 2

is trueCondition 2

is false

Condition 3

is true

Loops Set of statements have

to be executed repeatedly for specific number of times.

Used with certain condition to control the number of iterations

Advantages of Loops Used to minimise code

size

…statements to be executed until the

condition is met

Increment / decrement counter variable……

Start

Initialise counter variable……

Yes

No

is counter variable =

expected no.

statements

End

FOR Loop Initialise the counter variable. check the value of the counter variable against max

limit to operate the loop. If the condition is true then the loop is terminated. Otherwise Counter variable gets updated after

executing the set of statements. Repeat the above operation till condition is not true.

Eg :

Find the sum of numbers from 1 to 100.

Nested FOR Loops

for loop present within other for loop is called as Nested for loop.

Execution of Inner most Loop gets completed first

Loops cannot overlap with another loops.Eg :

To calculate and print the cube of ten numbers

…………..for (i=1; i<10; i++){Cube = 1Read Number for(j=1; j<3; j++)

{ Cube=Cube* Number }Print Number, Cube}………….

Summary

Operator precedence is the order in which operators get evaluated.

If two operators of the same precedence occur in an expression, then it gets evaluated from left to right.

Operators used for comparing two operands on the basis of a certain condition are called as Comparison Operators.

Logical operators take Boolean values (true or false) as operands and return a Boolean value.

Summary

The precedence of operators can be modified using parentheses

Ternary operator takes three operands, condition to be evaluated two values to be returned depending upon the

condition evaluating to true or false. The comma operator (,) evaluates two

operands and returns the value of the second operand.

The typeof operator returns a string indicating the type of the operand.

Summary

The if statement allows decisions based on a condition

The if statement can contain another if - else statement is called the nesting of if statements.

A loop is basically the execution of a set of statements repeatedly.

Loops present within another Loop is called as Nested loop.

In nested loops, execution of Inner most Loop gets completed first

Session 4

Programming Constructs

Session objectives Use while and do – while construct

Use switch-case construct

Apply break and continue statements

Use conversion functions

While Construct

To execute a set of statements repeatedly till it satisfies certain condition.

Condition is evaluated every time before the statement is executed.

Operation of the while loop is terminated when the condition is not met.

No

Yes

Condition = ?

statements to be executed until the

condition is met

Start…….

…….

End

To execute a set of statements repeatedly till it satisfies certain condition.

Condition is evaluated after the statements are executed for the first time.

Operation of the while loop is terminated once the condition is not met.

No

Yes

Condition = ?

statements to be executed until the

condition is met

Start…….

…….

End

Do While construct

Continue statement used to skip portion of the

loop and continue with next iteration.

On execution control is transferred to the looping statement to continue with the looping process

continue statement can be used anywhere in the loop.

Used within a if statement

No

Yes

Condition = ?

Other loop

statements

Start…….

…….

End

Continue

Statements to be executed before the

condition

Switch - Case Statement

The switch-case statement is construct to choose from multiple paths of branches

Switch statement is used with an variable Multiple case statements are present in the

construct Statements inside the case construct gets

executed for which the value matches with variable used with Switch statement.

Switch - Case Statement (Contd…_)

Case statements should be constructed in such a way that only one case construct gets executed. default case gets executed only when there are no matching values used with case.

One default case should be present in every problem using switch-case construct

switch - case statement[Cont…]

.Read

Num1

Num2 OPR

+

-

*

/Branching based upon

opr value

Ans = Num1 + Num2

Ans = Num1 - Num2

Ans = Num1 * Num2

Ans = Num1 / Num2

Default Not a valid opr

switch - case statement[Cont…] switch ( value )

{case ( value 1 ) :{

Statement(s)

} case ( value n ) :

{Statement(s)

}default :{

Statement(s)

}}

Conversion functions eval() –

This function converts a string to a numerical value.

eg sum = eval(“1234”)

value 1234 gets assigned to the variable name sum.

eg num = parseInt(“xyz123”)

An error is encountered when the eval() is used with the string containing non numerical values.

Conversion functions[Contd…]

parseInt() – This function extracts integers from the string

if the string starts with numbers. num = parseInt(“123String”)

value 123 being assigned to the variable num num = parseInt(“xyz123”)

value 0 is assigned to num

Conversion functions[Cont…]

parseFloat()

it extracts and returns the floating-point number from the given string.

Number = parseFloat(“1. 23e2xyz”) function returns 123.00 to Number

Number = parseFloat(“xyz”) returns 0 to Number

Summary The while statement is another looping structure in

JavaScript language and is used to execute a set of statements while a certain condition is true.

The do - while statement is similar to that of the “while” loop. The only difference is that the looping condition is checked at the end of the loop, instead of at the beginning.

The break statement is used to exit from a loop and transfers the control to the statement after the loop.

The continue statement is similar to that of the break statement but it does not terminate the loop.

Summary The eval() function converts a string to a

numerical value. The parseInt() function converts a string in

to an integer. The parseFloat()extracts the first floating-

point number from the given string.

Working with Arrays

Session 5

Session Objectives

Identify the need for Single dimensional array Double dimensional array

Construct arrays Use Dense arrays Work with different type of array

elements Use array manipulation commands

Using Variables

Each of these variables has to be declared

If a program has large amount of data is to be stored, it is difficult to think of a variable name for each of these.

One variable can store one value at a time. Hence for storing 100 values 100 different variables are required.

Use of more number of variables lead to longer execution time for a program

1. Start2. Declare num1, num2,

num3, num4, num5 and sum as integers

3. Accept num14. Accept num25. Accept num36. Accept num47. Accept num58. Sum = num1 + num2

+ num3 + num4 + num5

9. Display sum10. End

What is an Array?

An Array is a group of elements of the same data type which share a common name.

Example for a Single Dimension Array :

J A V A S C R I P T

An Array of Characters

Characteristics of ArraysAll the elements share a common name.

Each element has the same data type.

The entire array is stored contiguously in memory.

J A V A S C R I P T 0 1 2 3 4 5 6 7 8 9

Array of Characters Array of Numbers

Prglang[9] digits[9]

Declaring an Array

Syntax used for declaring an array

No. of elements

Name of array

Array num[5]

Declaring an Array[Contd…]

In JavaScript : for creating an fixed length array

Method 1

ArrayName = new Array(arrayLength)

Fixed length array gets created in memory with the specified length.

Declaring an Array[Contd…]

In JavaScript : for creating variable length Array

Method 2 ArrayName = new Array()

A variable length Array gets created in memory block.

Array length is equal to the number of elements stored in the array

Variable arrays help conserve memory space

Array Index

Array element is accessed with the help of index number.

num[0] :- index starts at 0

4 5 6 7 8

Num(0) Num(1) Num(2) Num(3) Num(4)

Num(4)

Array index

Using Arrays

StartArray num[5]Declare sum, count as integersum = 0count = 0While count < 5

Accept num[count]

Add num[count] to sum count = count + 1

Display sumEnd

Array declaration for 5 elements

Reduces Code size and minimise on use of variables

Every array position can store different values. Faster execution of the program.

Example : To find the sum of 5 nos. using array Advantages

Assigning Values To Array Elements

Assigning strings to an array

For example:

Employee[0] = “James”Employee[1] = “Paul”

Where Employee is name of the array.

Assigning Values To Array Elements[Contd…] Assigning Integers to an array

int_Arr[0] = 10int_Arr[1] = 11

Assigning characters to an array

ch_ar[0] = ‘l’

ch_ar[1] = ‘o’

Retrieving Values From an Array The contents of an array can be retrieved in following way

Variable Name = Array name [Index] Ex

A = Num[2]

which assigns value 14 to Variable name A

12

13

14

15

16

Num(4)

Multi-Dimensional Array

Two- Dimensional Array is declared in terms of rows and columns

Used to store tabular data

Marks [Rowpos][Colpos]

Physics Maths Science

Julia 45 60 90

Ben 20 67 92

Tom 90 35 56

Demi 78 50 80

To store marks in 3 subjects for 4 students.

Multi-dimensional Array [Contd…]

To access an element of a multi-dimensional array

var X = Marks[0][1]

Value 60 is assigned to variable name X

Physics Maths ScienceJulia 45 60 90Ben 20 67 92Tom 90 35 56

Demi

78 50 80

Marks[3][3]

rows are student names columns are subjects

Dense Arrays

When an array is initialized during declaration itself, it is known as “Dense Array”.

Days = new Array(“Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”,”Sun”)

Mon Tue Wed Thu Fri Sat Sun

Days(0) ………Days(6)

Finding the Length of Array

Array_Name.length is used to determine the length of an array (number of elements that

can be stored)

weekdays = Days.length

Value 7 is assigned to the variable name weekdays

Mon Tue Wed Thu Fri Sat Sun

Manipulation of ArraysArray function : toString() : Converts an array to string.

Ex

document.write(num.toString())

num = 4 5 6 7 8

“45678”

Manipulation of Arrays[Contd…] Array function : join(separator): Separator string separates the array

elements

Ex

document.write(num.join("-"))

num = 4 5 6 7 8

4-5-6-7-8

Manipulation of Arrays[Contd…] Array function : sort() : Sorts the contents of array in ASCII format

Ex

document.write(num.sort())

num = 6 5 4 2 8

2 4 5 6 8

Manipulation of Arrays[Contd…] Array function : reverse() :

reverses the contents of array.

Ex

document.write(num.reverse())Num

= 4 5 6 7 8

8 7 6 5 4

Nested Arrays Arrays can be stored as other array’s element

Arr3 Arr1[0] Arr1[1] Arr1[2] Arr1[3] Arr1[4] Arr2

Arr1 10 20 30 40 50

Arr2 11 12 13 14 15

The length of Arr1 is 5 and the sum of elements is 150



ARRAY WITH DIFFERENT DATA ELEMENTS junk = new Array (“Hello”, ‘World’, 12, 123.4, true,

false);

Junk Hello World 12 123.4 True false

• document.write( Junk[0]+Junk[1]);Concatenates and returns “HelloWorld”

document.write( Junk[2]+Junk[3]);Sums up the values and returns 135.4

document.write( Junk[4]+Junk[5]);Evaluates and returns 1 [True (1) + False(0)]

Summary

A collection of objects all of the same type is known as an array.

Each object in an array is called an array element. The array index indicates the position of the array

element, which is to be accessed. Array_Name [Index]

In JavaScript arrays can be declared in the following manner. arrayName = new Array (arrayLength) arrayName = new Array ( )

Array elements can be initialised in the following manner Array_Name [ Index ] = Value Array_Name is the name of the array Index is the position of the array element for which

the value has to be assigned

Dense Arrays are ones, which are initialised

during the declaration stage itself.

Summary

The following are the functions that can be used with arrays toString() This functions converts an array to a

string.. join(separator) This function is same as the

toString() function.. sort() This function sorts the contents of an array

based upon the ASCII value reverse() This function reverses the contents of

an array.

Summary

Session 6

Functions

Session Objectives Need for functions Advantages of Functions Functions with fixed and variable parameters Use of the return statement Difference between user-defined and

predefined functions The need for function libraries The “Function” object

Functions Larger programs are broken down into

smaller modules for the ease of understanding.

Each module can act as a separate program by itself

Smaller modules performing task on it own are functions.

Function Definition

Func 2Func1 Func 3

1.Start2. Func1()3. Func2()4. Func3()4. End Function names

Function definition

Statements within Function

Function Calling statements

Invoking a FunctionStart …………….

doAccept emp_no, emp_nameHRA_CAL()allow = HRA + std_AllowPF_CAL()deduct = std_ded + PFnet_sal = (basic + allow) - deductdisplay emp_no, emp_name……..End

1 Start 2 if (grade != 3) PF = .06 * basic else PF = 0 end if3 return

Program

Function PF_CAL()

Function

PF-Calc()

Is invoked

Functions Arguments Functions arguments are values passed to functions to perform certain task

Add (x is an integer, y is an integer)StartDeclare sum as an integersum = x + yDisplay sumreturn

• User defined function ADD(x,y) to add two numbers

X & Y are arguments

Standard Functions

• Standard functions pre-defined by software itself to perform specific task

Example

document.write()

User-defined Functions

• User-defined functions written by user to perform specific task

Example

To add two numbers

Local Variables

Ans can be accessed from the block where it is defined only.

<TITLE> Sum Function </TITLE><SCRIPT LANGUAGE = "JavaScript">function Sum(num1, num2){ var ans = num1 + num2 document.write (“The sum is ” + ans)

}</SCRIPT></HEAD><BODY><H1 ALIGN = "CENTER"> Function to add two numbers</H1><SCRIPT LANGUAGE = "JavaScript">Sum (1,2)</SCRIPT>

Global Variables</HEAD><BODY><H1 ALIGN = "CENTER"> Local and Global variables </H1><SCRIPT LANGUAGE = "JavaScript">function Sample(){

Sum = 1}Sample()document.write ("The value of the variable global Sum is" + Sum)</SCRIPT></BODY></HTML>

Sum can be accessed from anywhere in the program

Function Libraries

A collection of functions is known as a function library. The advantage using a function library is that it need not

be reproduced in programs.

MATHAvg() – to calculate

average

Sqrt() – to calculate square root

Date and Time Fetch the system date and time

Extract the month from a date

Calculate the days between two dates

Functions With Varying Arguments<TITLE> Sum Function </TITLE><SCRIPT LANGUAGE = "JavaScript">function Sum (){

var len = Sum.arguments.lengthvar ans = 0for (i=0; i<len; i++){

ans += Sum.arguments[i]}document.write( “The sum is” + ans)document.write(“<BR>”);

}</SCRIPT></HEAD><BODY><SCRIPT>Sum (10, 20)Sum (10,20,30)</SCRIPT><BODY>

</HTML>

JavaScript allows functions with varying

arguments only when used with argument array

Function - Returning Values

function Sum is invoked to return Value of ans (3) to variable total

<TITLE> Sum Function </TITLE><SCRIPT LANGUAGE = "JavaScript">function Sum(num1, num2){

var ans = num1 + num2return ans

}</SCRIPT></HEAD><BODY><H1 ALIGN = "CENTER"> Function to add two numbers</H1><SCRIPT LANGUAGE = "JavaScript">var total = Sum (1,2)document.write (“The sum is” + total)</SCRIPT>

Function Object

To create functions dynamically

Fn = new Function(“a1”, “a2”, ….. “an”, ”Body”)

Example

sum= new Function(“a1”,”a2”, “var ans=0; ans=a1+a2; return ans;”)

Sum1 = Sum(1,2) shall invoke the above function and return the value 3 to

variable name sum

Functions are set of statements, which perform a specific task.

Functions may or may not return a value.

Every function has a name and an argument list, which is optional. Values passed to the functions are known as parameters / arguments. The control is transferred back to the calling program after the execution of the last statement in the called function. The return statement can be used for transferring the control and value back to the calling program.

Summary

Summary

Variables declared inside a function using the var keyword are known as local variables and their scope is limited to the function.

variables without using the var keyword, then it can be accessed from any part of the program. Such variables are known as global variables.

User defined functions are written by the programmers according to their requirements.

Standard functions provided by the programming language. A collection of functions is known as a function library.. The Function object allows you to dynamically create and invoke

functions

Session 7

Event Handling

Session Objectives

Define an event

Define an event handler

Types of event handlers

Events associated with various HTML elements

Basic mouse events

Events & Event handlers An event represents the user’s interaction with the program

Mouse Move

Key Press event

code for Mouse move event

code for Key Press event

execute

execute

Event handlers

Triggering Events

Events can be triggered by an activity between

1. Program 2. System

3. User

Eg

System generates an event when an action is performed by the user such as

selecting a particular menu option clicking on some button etc

Screen saver - event triggered by the system.

Example in JavaScript

Event handler :

Code segment attached with an event It gets executed when the event is triggered.

Event Handler can be System defined User Defined

Example in JavaScript

mouseOver is an event which is generated every time the mouse is placed over a hyper link

Eg

‘++num; alert(“Number : ”+num)’

Event Handler attributes and Events

Event mouseOver

Event HandlerAttribute

onMouseOver

Attributes are used for identifying events

Eg

onMouseOver is defined by JavaScript to identify

occurrence a mouseOver event

Event Handling Attribute

Event Event handling attribute

click onClick

dbClick onDbClick

mouseUp onMouseUp

mouseDown onMouseDown

mouseOver onMouseOver

keyDown onKeyDown

Mouse events

Keyboard Events

• The above events gets generated when

the user interacts with the hypertext

Link EventsHTML

Element HTML

Tag JavaScript

Event Description

Link <A> </A> click Left mouse button is clicked on a link

dbClick Left mouse button is double clicked on a link

mouseOver Mouse cursor is placed over the link

mouseDown Left mouse button is pressed

mouseUp Left mouse button is released

keyDown Key is pressed

Body Events

HTML element

HTML tag

JavaScript event

Description

Document

Body

<BODY> </BODY>

click

When mouse is clicked in the document body

dbClick

When mouse is double clicked in the document body

blur When window loses focus

mouseDown

When mouse button is pressed

mouseUp

When mouse button is released

keyDown

When key is pressed

Body Events –(Contd.)

keyUp

When key is released

keyPress

When key is pressed and released

move

When window is moved

resize

When window is resized

load

When loading of window is complete

unload

When window is closed

focus

When window receives input focus

Image Events HTML element

HTML tag

JavaScript event

Description

Image <IMG> abort

When image loading is cancelled

error

When there is an error while loading an image

load When an images is loaded and displayed

keyDown

When key is pressed

keyUp

When key is released

keyPress

When key is pressed and released

other events HTML element

HTML tag

JavaScript event

Text field

<INPUT TYPE = “TEXT”>

blur

focus

change

select

Password Field

<INPUT TYPE = “PASSWORD”>

blur, focus

other events(Contd.)

Button

<INPUT TYPE = “BUTTON”>

click

mouseDown

mouseUp

blur

focus

Submit

<INPUT TYPE = “SUBMIT”>

click

blur

focus


Reset

<INPUT TYPE = “RESET”>

click

blur

focus

Radio Button

<INPUT TYPE = “RADIO”>

click

blur

focus


Checkbox

<INPUT TYPE = “CHECKBOX”>

click

blur

focus

Selection

<SELECT> </SELECT>

blur

focus

change


TextArea

<TEXTAREA></TEXTAREA>

blur

focus

change

keyDown

keyPress

keyUp

select

Summary

Events occur as a result of the user interaction with any application. The code that is executed when an event occurs is known as an event handler. An Event can be either triggered by a user or by another event.

Events in JavaScript can be broadly classified as follows:

Events associated with <A> tag Events associated with <IMG> tag Events associated with <BODY> tag Events are also associated with other HTML elements

such as buttons, text field, password field, text area, selection, submit and reset buttons.

Summary

Session 8

Object and Forms

Session Objectives Identify the need for JavaScript Explain the term Object Use properties and methods of an

Object List in built JavaScript objects such as

browser, window, document and forms

Use form elements using the form object

Session Objectives (cont.) List the properties and methods of the

form object Use the forms array of the document

object Use the elements array of the form

object

JavaScript

interactive web pages

processing capabilities to HTML

forms

objects to manipulate web pages

simpler than

CGI scripts

hybrid HTML and a

Programming language

JavaScript – Features

Browser Objects

Browser Object

Description

window object To access the browser window. It is the top most object in the browser objects hierarchy

document object

To access the document displayed in the browser. It is used to access the contents displayed by head and body sections

form objectforms array

To access an HTML form. The forms array is used to access all the form objects in the HTML document

elements

To access all the form elements in the HTML document

Window Object

Top level object in the hierarchy of browser objects

Automatically defined by the browser

Need not specify the name of the window object while invoking methods such as alert(), prompt()

Window Object (Example)

Example

document.write(“Some Display Text”)

JavaScript assumes the current window object and executes

window.document.write(“Some Display Text”)

Document Object It has a property called forms, which is an array

The forms array provides access to all the forms embedded in a web page Eg

to access the third form :

document.forms[2]

window.document.forms[2]

Form Object

To interact with HTML forms and process its contents

document.form_namedocument.forms[index]

To access document.myform2

document.forms[1]

Accessing Form Elements

Using the HTML name

document.form_name.element_name document.myform1.text1.value

Using elements array

document.myform1.elements[3].value

Form Elements (Properties & Methods)

Element Object

Properties Methods

button name click()

type blur()

value focus()

<P ALIGN="CENTER"><INPUT TYPE="BUTTON" VALUE="Submit Form" ONCLICK="return processForm()"><INPUT TYPE="RESET" VALUE="Reset Form"></P>

Form Elements (Properties & Methods)[Contd…]

Element Object

Properties Methods

text name select()

type blur()

value focus()

Default Value

<H2 ALIGN="CENTER">Handling Form Events</H2><HR><FORM NAME="form1"><P>First Name :<INPUT TYPE="TEXT" NAME="fname" MAXSIZE="10" ONCHANGE="Validate_FirstName()">Last Name :<INPUT TYPE="TEXT" NAME="lname" MAXSIZE="15" ONCHANGE="Validate_LastName()"></P>


Element Object

Properties Methods

checkbox checked click()

name blur()

type focus()

value

default Value


Element Object Properties Methods

checkbox name blur()

type focus()

length

selectedIndex

options


<H1 ALIGN = "CENTER"><U>Hobbies</U></H1>

<INPUT TYPE = "CHECKBOX" NAME = "Hobbies" VALUE = "Reading" CHECKED> Reading Books <BR>

<INPUT TYPE = "CHECKBOX" NAME = "Hobbies" VALUE = "Music" > Listening to Music <BR>

<INPUT TYPE = "CHECKBOX" NAME = "Hobbies" VALUE = "Trekking" > Trekking <BR>

<INPUT TYPE = "CHECKBOX" NAME = "Hobbies" VALUE = "Painting" > Painting <BR>

Accessing forms in a HTML Document

To access the value of an object text1 which is in a form myform1

document.myform1.text1.value To access the value of an object text1 which is in the second form of

the document

document.form[1].text1.value

<SCRIPT LANGUAGE = "JavaScript"><BODY> <H2 ALIGN = "CENTER"> Basic form processing </H2><HR><FORM NAME = "myform1">Your Name <BR><INPUT TYPE="TEXT" NAME="text1" SIZE = "15"><BR>Your Password <BR> <INPUT TYPE="PASSWORD" NAME="pass1" SIZE= "8"><BR>

JavaScript is an interpreted, object-based scripting language. An object can be defined as an entity, which consists of data members

known as Properties and member function known as Methods, which act upon the data members.

Properties of an object can be accessed in the following manner.

Object.Property If a property of an object is an object by itself then it can be accessed in

the following manner.

Object.Property.Property Methods of an object can be accessed in the following manner.

Object.Method()

Summary

Summary The window object is an in built JavaScript object used for

accessing the browser window. It is the top most object in the browser objects hierarchy.

The document object is an inbuilt JavaScript object used to access

the document displayed in the browser. It is used to access the contents displayed by head and body sections.

The form object allows your script to interact with HTML forms

and process the contents contained in it. The forms array, which is a property of the document object, can

be used for accessing every form in the HTML document

Every form can contain one or more of the following elements such as radio button, push button, checkbox, submit button, reset button, options menu and text area.

Each element is an object and has its own properties and methods. The properties common to most of the form elements are given below.

nametype

value The methods common to most of the form elements are given below.

blur()

focus()

Summary

Session 9

Advanced JavaScript

Session Objectives

Apply the Date object Use the Event object Apply the Image object to dynamically load images Use the window object timeouts and time intervals Use the document object Apply in-built JavaScript objects

history, navigator and string objects

The Date Object

The Date object provides methods to work with date and time.

my_date = new Date()

Creates a date object containing the system date and time

my_date

System Date &

System Time

The Date Object Contd…..)

my_date = new Date(year, month, day, hours, minutes, seconds, milliseconds)

Other than Year and month all other parameters are optional

Note : If the optional parameters are included, then it must be specified in the pre defined order.

my_dateYear

Month

Day

Hours

Minutes

Seconds

milliseconds

Date Object (Functions)

getDate( ) getDay( ) getMonth( )

getYear( ) getFullYear( )

Returns the day (01) of the month

Returns the day of the week (6)

Returns the month of the year (0)

(‘0’ for January,

‘1’ for February till

‘11’ for December).

Returns the year (00)

Returns the year in four digit format ( YYYY) (2006)

Let us consider the functions : With the Eg : 01-Jan-2006

Date Object (Functions) (Contd)

setMonth( )

setYear( )

setFullYear( )

sets the month of the year

sets the year

sets the year in four digit format (YYYY)


getTime( )

getHours( ) getMinutes( ) getSeconds( )

Returns the time in milliseconds since midnight January 1, 1970

Returns the hours, minutes and seconds from Date object


setHours( )

setMinutes ( )

setSeconds( )

sets the hours, minutes and seconds for the Date object.

The Event Object

Events are related to tasks that gets carried out by Keyboard and Mouse interface.

The properties available to an event object depend upon the type of event that occurred.

Mouse Move event

Key Press event

Event Object (Properties)

height

width

screenX

screenY

The height and the width of the window in pixels.

Mouse cursor’s X position in pixels.

Mouse cursor’s Y position in pixels.

Event Object (Properties) (Contd….)

type

determines the type of the event

keypress

click

dblclick

keyCode

identifies the UNICODE key code associated with the key press.

Event Object (Properties) (Contd…)

Buttons : Used to identify the mouse button that was

pressed when an event occurred. Various possible values of this property are:

0 No button

1 Left mouse button

2 Right mouse button

3 Middle mouse button

altKey, ctrlKey, shiftKey set to true or false indicating whether alt, ctrl or Shift

keys were pressed when the event occurred.

The Image Object

The image object is used to dynamically work with images in a HTML document

The image object has the following

properties. src identifies the source of

an image.

<HTML>

<HEAD>

<TITLE> The Image object </TITLE>


img1 = new Image()

img2 = new Image()

img1.src = “but1.gif”

img2.src = “but2.gif”

The Image Object (Contd) height

identifies the height of an image. specified in pixels or as percentage of the window’s height.

widthidentifies the width of an image. specified in pixels or as percentage of the window’s width.

Complete identifies whether an image has been completely loaded in the browser or not

border identifies the thickness of an image border in pixels.

Window Object

Used to dynamically open and close windows Uses the open() and close() methods to open and close the browser

window. open() method is used as

variable = open(url, name, [options])

url URL of the file to be opened.name name of the window.options Characteristics of the window in which the

url is opened. ( This is optional.)variable variable name to which the window

object is associated.

Window Object (Contd)

The open() method returns the window object, which is opened for displaying the specified URL.

my_var=open("samp.html","win1”)

Window Object (Contd)

my_var=open("samp.html","win1”,[option] )

Option are given with values as listed below. More than one option, can be used with separated by commas and enclosed within

double quotes.

Option Value Description

toolbar Yes / no Tool bar of the windowMenubar Yes / no Menu bar of the windowstatus Yes / no Status bar of the windowresizable Yes / no resized window or notwidth Integer Window widthheight Integer Window height

Closing a Window

The close() method is used to close an Open window:

variable.close()

variable: The variable which contains the window object

Example : The following statement closes a window associated with the window object “win”

win.close()

Timeouts

timeouts are used to execute function once after a specified time period.

It uses the following methodssetTimeout()

setTimeout() method executes only once after the specified time period has elapsed.

Time Interval Time interval are used to execute function repeatedly after a

specified time period has elapsed.

It uses the following methodssetInterval()

setInterval( ) method is used for repeated execution after the specified time period has elapsed.

Setinterval( )

This method is used as follows :

variable= setInterval(expression, milliseconds)

or

variable = setInterval(function, milliseconds)

It is used to evaluate the expression / function and assign the interval reference to the variable.

Setinterval( )(Contd)

ref = setInterval(‘alert(“4 Seconds Over”)’,4000)

used to display an alert dialog box with the message “4 Seconds Over” for every 4 seconds.

ref = setInterval(“MyFunc()”, 4000)

used to invoke the function MyFunc() for every 4 seconds.

Clearinterval() The clearInterval() method of the window is used to

undo the effect caused by setinterval() method

ref = setInterval(“MyFunc()”, 4000)

is used to define and invoke a timeinterval

clearInterval(ref)

is used to clear timeinterval

Settimeout()

This method is used as follows :

variable= setTimeout(expression, milliseconds)

or

variable = setTimeout(function, milliseconds)

It is used to evaluate the expression / function and assign the interval reference to the variable.

Settimeout( ) (Contd)

ref = setTimeout(‘alert(“4 Seconds Over”)’,4000)

used to display an alert dialog box with the message “4 Seconds Over” for every 4 seconds.

ref = setTimeout(“MyFunc()”, 4000)

used to invoke the function MyFunc() for every 4 seconds.

Document Object Properties (Contd)

To access forms and alter the color settings of the document elements

bgColor background colour of the

document.

fgColor text colour in the document.

linkColor colour of the unvisited links.

alinkColor colour of a link while it is

being activated.

vlinkColor Colour of visited links.

The History Object

The history object represents the list of documents that the current window or frame has displayed. back() Loads the

previous URL in the history list forward() Loads the next

URL in the history list length It gives the length

of the history list go() Loads an URL

specified from a current place

The Navigator Object

The navigator object provides the following information about the browser

version and type

Declaration of Strings String can be declared in two ways

Using Single or double quotes

Str = “This Is Sample String”

The other way is to declare and initialize the string

Str = new String (“This Is Sample String”)

The String Object

toLowerCase() converts the string to lowercase. toUpperCase() converts the string to uppercase

myString=new String("This is first string. This is second string")

document.write(myString.substring(7)+"<BR>")

The statement returns the substring “first string. This is second string” from myString, which starts at index 8.

document.write(myString.substring(5,13)+"<BR>")

The statement returns the substring “is first” from myString, which starts at index 5 and ends at index 12.

The String Object

document.write(myString.split('first')+"<BR>")

This statement converts myString into the following two sub strings “This is” and “string. This is second string” because the separator string is “first”.

document.write(myString.indexOf('first')+"<BR>")

The following statement returns the index value of the pattern “first” from myString.

The String Object

document.write("myString.charAt(8)\t\t:")

This statement returns the the letter “f” starting at 8th position in the given string.

document.write(myString.charCodeAt(1)+"<BR>")

This statement returns the ASCII value 104 of the letter “T”, which is at index 1.

Summary

The Date object provides methods to work with date and time. The Image object can be used to provide dynamic effect to images

displayed in web pages. The images array, which is a property of the document object, can be

used for accessing all the images in the web page. The event object was introduced with JavaScript 1.2 and is used for

providing information about an event during execution.

Summary

The setInterval() method evaluates a function or an expression repeatedly for the specified number of milliseconds and it returns an interval reference. The setTimeout() method evaluates an expression or invokes a function after a timeout period has elapsed The open() and close() methods of the window object can be

used from within JavaScript to open and close browser windows.

Summary

The document object is used for accessing the various components embedded in a web page, which is displayed in the browser window. The history object represents the list of documents that the current window has displayed.

The navigator object provides information about the browser such as version number, type and other browser specific information.

String object has functions to manipulate strings.

THANKS

Java Script Session1 INTRODUCTION. Session Objectives Describe JavaScript Differentiate between...

Documents

Transcript of Java Script Session1 INTRODUCTION. Session Objectives Describe JavaScript Differentiate between...