Unit – 3

Syllabus:-

Introduction to JavaScript: What is DHTML, JavaScript, basics, Variables, String Manipulations,

Mathematical functions, statements, operators, arrays and functions.

What is DHTML?

Dynamic HyperText Markup Language (DHTML) is a combination of Web development technologies used to create dynamically changing websites. Web pages may include animation, dynamic menus and text effects.

The technologies used include a combination of

HTML JavaScript or VB Script CSS and The document object model (DOM).

HMTL:- Definition html

CSS:- CSS is used to DHTML to control the look and feel of the web page. Stylesheet define the color

and fonts of text, the background colors and images, and the placement of objects on the page. Using

Scripting and the DOM, you can change the style of various elements.

Scripts:- Scripts written in either JavaScript or VBScript are the two most common scriptitng

languages used to activate DHTML. You use a scripting language to control the objects specified in the

DOM.

DOM:- The Document Object Model(DOM) is one, which allows you to access any part of your web

page to change it with DHTML. Every part of a web page is specified by the DOM and using its

consistent nameing conventions you can access them and change their properties.

Features of DHTML:-

Dynamic content, which allows the user to dynamically change Web page content Dynamic positioning of Web page elements Dynamic style, which allows the user to change the Web page’s color, font, size or content

Difference between HTML and DHTML:-

HTML

1. HTML stands for HyperText Markup Language. 2. HTML creates static web pages. 3. HTML sites will be slow upon client-side technologies. 4. HTML creates a plain page without any styles and Scripts called as HTML. 5. HTML cannot have any server side code. 6. In HTML, there is no need for database connectivity. 7. HTML files are stored with .htm or .html extension. 8. HTML does not require any processing from browser.

DHTML

1. DHTML stands for Dynamic HyperText Markup Language. 2. DHTML creates dynamic web pages. 3. DHTML sites will be fast enough upon client-side technologies. 4. DHTML creates a page with HTML, CSS, DOM and Scripts called as DHTML. 5. DHTML may contain server side code. 6. DHTML may require connecting to a database as it interacts with user. 7. DHTML files are stored with .dhtm extension. 8. DHTML requires processing from browser which changes its look and feel.

Introduction to JavaScript:-

JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time.

The language was initially called LiveScript and was later renamed JavaScript. There are many programmers who think that JavaScript and Java are the same. In fact, JavaScript and Java are very much unrelated. Java is a very complex programming

language whereas JavaScript is only a scripting language. The syntax of JavaScript is mostly influenced by the programming language C.

JavaScript:-

JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. JavaScript is Scripting Language,it is case sensitive. You can write script either in head or body part.

In other words, you can make your webpage more lively and interactive, with the help of JavaScript.

JavaScript is also being used widely in game development and Mobile application development.

Benefits of JavaScript:-

JavaScript has a number of big benefits to anyone who wants to make their Website Dynamic.

It is widely supported in Web Browsers.

It gives easy access to the document objects and can manipulate most of them.

JavaScript can give interesting animations without that long download times associated with

many multimedia data types.

Web surfers don’t need a special plug-in to use you scripts.

JavaScript is relatively secure.

JavaScript can read neither from you local hard disk drive nor write to it.

We cannot get a virus infection directly from JavaScript.

Limitations of JavaScript:-

Although JavaScript looks too much advantageous, but it has some limitations also:

Most scripts rely upon manipulating the elements of the DOM. Support for a standard set of

objects currently doesn’t exist and access to objects differs from browser to browser.

If your script doesn’t work then you page is useless.

The problems of broken scripts many web surfers disable JavaScript support in their browser.

Scripts can run slowly and complex scripts can take long time to start up.

JavaScript Basics:-

We cannot create the interactive web pages using HTML. Hence JavaScript is designed to add the

interactivity in the HTML pages. The JavaScript is very much similar to programming language.

JavaScript originates from a language called LiveScript. JavaScript is platform independent and can be

run everywhere. JavaScript is used for client-side programming.

Let us write the first JavaScript by which some message will be displayed on the web page.

Example:-

<html> <head> <title>My First JavaScript Program</title> </head> <body> <center> <script type="text/javascript"> document.write("Welcome to First Page of JavaScript"); </script> </center> </body> </html> Similar to HTML JavaScript program has two sections, head and body. In the above program, the tag title is used to set title of the web page. In the body section we have use <center> tag to display the contents at the center of the web page. Here comes an important part: <script type = “text/javascript”>

This line tells the web browser that this is the JavaScript. Then comes

document.write(“Welcome to First Page of JavaScript”); The document.write is used to display some text on the web page. The text given within the double quotes will displayed on the webpage. The script tag is closed by </script>. Comments in JavaScript:- The JavaScript allows two kinds of comments

1. Single Line Comment - denoted as //. 2. Multi-Line Comment - denoted as /* */. Example:-

<html> <head> <title>Comment in JavaScript</title> </head> <body> <center> <script type="text/javascript"> document.write("Below I have some comment statements"); // This is single line comment /* we can enter some multiline comments in java script which will not be displayed on web page */ </script> </center> </body> </html> Variables:-

The variables are created in order to store some information. This information can be numeric (or) it can be string. In the following we have used few variables. In JavaScript there is specific data type like other programming language. It has type as var for all combination of data. Example:- <html> <head> <title>Variables in JavaScript</title> </head> <body> <script type=”text/javascript”> var a,b,c; a=2,b=3; c = a+b; document.write(“Addition = “+c); </script> </body> </html> Here, addition of two values are stored in variable c and is printed on web page.

In the above scripting, the variable stores numeric value. If the variable need to store string value, string should be mentioned between double quotes (“string”). Example: var str1=”Hello”; var str2=”JavaScript”; String Manipulations or String functions in JavaScript:-

String is a collection of characters. In JavaScript using string object many useful string related functionalities can be exposed off. Some commonly used methods of string object are concatenating two strings, converting the string to upper case or lower case, finding the substring of a give string and so on. Some of most common string functionalities are listed below,

Method Meaning 1. concat(str) 2. charAt(index-val) 3. length() 4.toUpperCase( ) 5.toLowerCase( ) 6. valueOf( ) 7. substring(begin, end) 8. indexOf( )

This method combines two strings. For example, s1.concat(s2), concatenation of string s1 with s2. This method will return the position of the character specified by its index value. This function returns the length of the string. This function is used to convert the entire lower case letter to upper case letter. This function is used to convert the entire upper case letter to lower case letter. This function is used to display the value of the particular string. This function return the substring specified by begin and end. This function is used to return the index within the calling string object of the first occurrence of specified value. If not found -1 will return.

Example:-

<html> <head> <title>String Maniputlation</title> </head> <body> <h3 align="Center">String Manipulation</h3> <h3 align="center">********************</h3> <script type="text/javascript"> var s1="Welcome"; var s2="Javascript"; document.write("The First String is "+s1+"<br>"); document.write("The Second String is "+s2+"<br>");

document.write("The Concatenation of the string is "+s1.concat(s2)+"<br>"); document.write("Character at 5th position in first string :"+s1.charAt(5)+"<br>"); document.write("The Length of the Second string :"+s2.length+"<br>"); document.write("UpperCase for the first string:"+s1.toUpperCase()+"<br>"); document.write("LowerCase for the second string:"+s2.toLowerCase()+"<br>"); document.write("Value of second string is :"+s2.valueOf()+"<br>"); document.write("Substring for the first string :"+s1.substring(3,7)+"<br>"); document.write("Index value for the s in second string is:"+s2.indexOf("s")+"<br>"); </script> </body> </html>

Output:-

Mathematical Functions in JavaScript:-

Mathematical functions and values are part of built in javascript object called “math.h”. All functions and attributes used in mathematical, must be accessed through this object only as Math.function-name( ).

Function Meaning 1. abs(value) 2. sqrt(value) 3. ceil(value) 4. floor(value) 5. pow(value1,value2) 6. min(value1,value2) 7. max(value1,value2) 8. round(value1,value2) 9. log(value) 10. sin(value), cos(value), tan(value)

Return the absolute value of the number passed into it. Returns the square root of the value. Rounds a number upwards to the nearest integer, return it. Rounds a number downwards to the nearest integer, return it. Returns the result of raising value to power. Returns the smallest value of the two values passed in it. Returns the biggest value of the two values passed in it. Returns the result of rounding its argument to the nearest integer. Returns the natural logarithmic values to power. Returns sin, cos and tan values to corresponding methods.

Example:-

<html> <head> <title>Mathematical Functions</title> </head> <body> <script type="text/javascript"> document.write("<b><u>Mathematical Functions</u></b><br><br>"); document.write("Absoulte value of 4.9 is..."+Math.abs(4.9)+"<br>"); document.write("Square Root value for 4 is..."+Math.sqrt(4)+"<br>"); document.write("Ceil value of 9.1 is..."+Math.ceil(9.1)+"<br>"); document.write("Floor value of 5.9 is..."+Math.floor(5.9)+"<br>"); document.write("3 Power 4 is..."+Math.pow(3,4)+"<br>"); document.write("Minimum value from(6,8) is..."+Math.min(6,8)+"<br>"); document.write("Maximum value from(9,10) is..."+Math.max(9,10)+"<br>"); document.write("Round value of 10.5 is..."+Math.round(10.5)+"<br>"); document.write("Log value for 1 is..."+Math.log(1)+"<br>"); document.write("SIN value for 5 is..."+Math.sin(5)+"<br>"); document.write("COS value for 5 is..."+Math.cos(5)+"<br>"); document.write("TAN value for 5 is..."+Math.tan(5)+"<br>"); </script> </body> </html> Output:-

Statements in JavaScripts:-

A computer program is a list of "instructions" to be "executed" by a computer. In a programming language, these programming instructions are called statements.

JavaScript statements are composed of: Values, Operators, Expressions, Keywords, and Comments.

For example, it is normal to add a semicolon at the end of the executable statement. document.write(“JavaScript developed by Brendan Eich in 1995”); Using semicolon, makes it possible to write multiple statements on one line.

1. Conditional Statements:-

Conditional statements are used to perform different actions based on different conditions.

1. simple if

2. if else

3. if else if

4. nested if

5. switch

1. simple if:- The if statement to specify a block of JavaScript code to be executed if a condition is

true.

Syntax:-

if (condition) { block of code to be executed if the condition is true }

Example:

var a = 100;

if (a>20)

{

document.write( a is greater );

}

2. if else:- The if else statement to specify a block of code to be executed if the condition is true, true

statement is executed otherwise false statement is executed.

Syntax:-

if (condition) { block of code to be executed if the condition is true } else

{ block of code to be executed if the condition is false }

Example:-

var a = 10; if (a>20) { document.write(“a is greater”); } else { document.write(“b is greater”); } 3. if else if:- The if else if statement to specify the first condition become true, block of code

executed otherwise the second condition will be tested. If all condition becomes false, else part

will be executed.

Syntax:-

if (condition1) {

block of code to be executed if condition1 is true

} else if (condition2)

{ block of code to be executed if the condition1 is false and condition2 is true }

else { block of code to be executed if the condition1 is false and condition2 is

false

}

Example:- var a=100;

if (a>0) {

document.write( The number is positive. ); } else if(a<0)

{ document.write( The number is negative. ); }

else {

document.write(“The number is exactly zero”); }

4. nested if:- Nested if statements means an if statement inside another if statement. i.e. if first condition

become true,it checks another condition. Syntax:- if (condition1) { if(condition2) { statement-1 } else { statement-2 } } else { statement-3 } Example:- var a=26; if (a>17) { if (a>59) { document.write(“You are eligible to vote and senior citizen”); } else { Document.write(“You are eligible to vote but not senior citizen”); } } else { document.write(“You are not eligible to vote”); }

5. switch:- The switch statement to select one of many blocks of code to be executed.

Syntax:-

switch(expression) {

case n: code block

break;

case n: code block

break;

default: code block }

Example:-

switch (day) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; } 2. Looping Statements:-

A loop is a sequence of instruction s that is continually repeated until the condition is true. Control comes out of the loop statements once condition becomes false. There are three types of looping statement that are listed below, 1. while loop 2. do while loop and 3. for loop 1.while loop:-

The while statement will execute a block of code while a condition is true..

Syntax:-

while (condition) { code to be executed

}

Example:-

var i=5;

while(i>1)

{

document.write(a);

i=i-1;

}

2. do...while loop:-

The do...while statement will execute a block of code at least once, and then it will repeat the loop while a condition is true.

Syntax:

do { code to be executed

}while (condition);

Example:-

var i=5;

do

{

document.write(a);

i=i-1;

} while(i>1);

3. for loop:-

The for statement will execute a block of code a specified number of times

Syntax:- for (initialization; condition; increment/decrement) { code to be executed }

Example:-

for(i=1;i<=5;i++)

{

document.write(i);

}

3. Jumping Statements:-

Jumping statements are used to transfer the program’s control from one location to

another, these are set of keywords which are responsible to transfer program’s control within the same

block or from one function to another.

Four Types of jumping statements that are listed below

1. Break

2. Continue

3. Goto

4. Return

1. Break:- The break is used to terminate the looping (exit from the loop).

Syntax:- break;

Example:-

for(i=1;i<=5;i++)

{

if(i==3)

{

break;

}

document.write(i);

}

2. Continue:- The continue is used to transfer the program’s control at the beginning of the loop.

Syntax:- continue;

Example:-

for(i=1;i<=5;i++)

{

if(i==3)

{

continue;

}

document.write(i);

}

3. Goto:- The goto statement is used to transfer the program’s control from one statement to another

statement (where label is defined).

Syntax:-

label1:

-------

-------

-------

goto label1;

Example:-

first: document.write( Welcome to );

goto second;

goto first;

second:

document.write( JavaScript );

4. Return:- The Return statement is used to transfer program’s control from called function to

calling function, it’s secondary task is to carry value from called function to calling function.

Syntax:- return;

Example:-

c = add(a,b); //function call

document.write(c);

function add(a,b)

{

return (a+b); //return value to called function

}

Operators in JavaScript:-

An operator is a symbol which operates on a value or a variable. For example: + is an operator to perform addition. There are different types of operator are listed below,

1. Arithmetic Operators 2. Comparison Operators 3. Logical Operators 4. Increment and Decrement Operator 5. Assignment Operators 6. Conditional Operator (Ternary Operator) 7. Bitwise Operators and 8. Special Operators / Miscellaneous operator.

1. Arithmetic Operators:-

Arithmetic operators take numerical values (either literals or variables) as

their operands and return a single numerical value.

We have numeric variable: x = 10, y = 5 and result.

Operator sign Description Example Results

+ Addition result = x + y result = 15

- Subtraction result = x - y result = 5

* Multiplication result = x * y result = 50

/ Division result = x / y result = 2

% Modulus result = x % y result = 0

Example:-

<script>

var x = 10, y = 5; document.writeln(x + y); // Addition: 15 document.writeln(x - y); // Subtraction: 5

document.writeln(x * y); // Multiplication: 50 document.writeln(x / y); // Division: 2 document.writeln(x % y); // Modulus: 0

</script>

2. Comparison Operators:-

Comparison operators are used in logical statements to determine equality or difference between variables or values.

Operator Name Sign Description

Equal == If both operands are equal, returns true.

Identical equal === If both operands are equal and/or same data type, returns true.

Not equal != If both operands are not equal, returns true.

Identical not equal !== If both operands are not equal and/or same data type, returns true.

Greater than > If left operand larger than right operand, return true.

Less then < If left operand smaller than right operand, return true.

Greater than, equal >= If left operand larger or equal than right operand, return true.

Less than, equal <= If left operand smaller or equal than right operand, return true.

Example:-

<script> document.writeln(5 == 5); // true

document.writeln(5 != 10); // true

document.writeln(5 > 10); // false document.writeln(5 < 10); // true document.writeln(5 >= 5); // true

document.writeln(5 <= 5); // true

</script>

3. Logical Operators:-

Logical operators are used to determine the logic between variables or values. It returns boolean result base on operands.

Operator Name Sign Description

Logical AND && If first operand evaluate and return a true, only that evaluate the

second operand otherwise skips.

Return true if both are must be true, otherwise return false.

Logical OR || Evaluate both operands,

Return true if either both or any one operand true,

Return false if both are false.

Logical NOT ! Return the inverse of the given value result true become false, and false

become true.

Example:-

<script> document.writeln((5 == 5) && (10 == 10)); // true document.writeln(true && false); // false document.writeln((5 == 5) || (5 == 10)); // true document.writeln(true || false); // true document.writeln(5 && 10); // return 10 document.writeln(5 || 10); // return 5 document.writeln(!5); // return false document.writeln(!true); // return false document.writeln(!false); // return true </script>

4. Increment and Decrement Operators:-

Increment and decrement operators are unary operators that add or subtract one from their operand, respectively We have numeric variable: x = 10, y = 5 and result.

Operator Name Description Example Results

++ Increment result = x++

result = x

result = ++x

result = 10

result = 11

result = 12

-- Decrement result = x--

result = x

result = --x

result = 12

result = 11

result = 10

Example:- <script> var x = 10, y = 5; document.writeln(x++); // x: 10, x become now 11

document.writeln(x); // x: 11

document.writeln(++x); // x become now 12, x: 12 document.writeln(x--); // x: 12, x become now 11

document.writeln(x); // x: 11 document.writeln(--x); // x become now 10, x: 10 </script>

5. Assignment Operators:-

JavaScript assignment operators assign values to left operand based on right operand. equal (=) operators is used to assign a values.

We have numeric variable: x = 10, y = 5 and result.

Operator Name Sign Description Example Equivalent to Results

Assignment = Assign value from one operand to

another operand value.

result = x result = x result = 17

Addition += Addition of operands and finally assign

to left operand.

result += x result = result + y result = 22

Similarly, we using subtraction(-=), multiplication(*=),division(/=),modulo(%=) etc,. in assignment operator. Example:- <script>

var x = 17, y = 5;

var result = x; // Assignment to left operand(result) base on right operand(y). document.writeln(result); document.writeln(result += x);

document.writeln(result -= y); document.writeln(result *= y); document.writeln(result /= y);

document.writeln(result %= y); </script>

6. Conditional Operators:-

The conditional operator evaluate the first expression(operand), Base on expression result return either second operand or third operand. Syntax:-

answer = expression ? answer1 : answer2; // condition ? true : false Example:-

document.write((10 == 10) ? "Same value" : "different value"); 7. Bitwise Operators:-

The Bitwise operators evaluate and perform specific bitwise (32 bits either zero

or one) expression.

Operator Name Sign Description

Bitwise AND & Return bitwise AND operation for given two operands.

Bitwise OR | Return bitwise OR operation for given two operands.

Bitwise XOR ^ Return bitwise XOR operation for given two operands.

Bitwise NOT ~ Return bitwise NOT operation for given operand.

Bitwise Shift Left << Return left shift of given operands.

Bitwise Shift Right >> Return right shift of given operands.

Bitwise Unsigned Shift Right >>> Return right shift without consider sign of given

operands.

Example:- <script> document.writeln(5 & 10); // return 0,calculation: 0000 0101 & 0000 1010 = 0000 0000 document.writeln(5 | 10); // return 15, calculation: 0000 0101 | 0000 1010 = 0000 1111 document.writeln(5 ^ 10); // return 15, calculation: 0000 0101 ^ 0000 1010 = 0000 1111 document.writeln(~5); // return -6, calculation: ~ 0000 0101 = 1111 1010 document.writeln(10 << 2); // return 40, calculation: 0000 1010 << 2 = 0010 1000 document.writeln(10 >> 2); // return 2, calculation: 0000 1010 >> 2 = 0000 0010 document.writeln(10 >>> 2); // return 2, calculation: 0000 1010 >>> 2 = 0000 0010 </script>

8. Special Operators:-

The following operators are known as JavaScript special operators.

Operator Description

(?:) Conditional Operator returns value based on the condition. It is like if-

else.

, Comma Operator allows multiple expressions to be evaluated as single

statement.

delete Delete Operator deletes a property from the object.

in In Operator checks if object has the given property

instanceof checks if the object is an instance of given type

new creates an instance (object)

typeof checks the type of object.

void it discards the expression's return value.

yield checks what is returned in a generator by the generator's iterator.

Array in JavaScript:-

An array is a collection of data elements which can be accessed through a single variable name. An

array is made up of set of slots (parts) with each slot assigned a single data element. We can access the data element either sequentially by reading from the slot of the program or by

their index value. The data inside an array is ordered because elements are added and accessed in particular order. Example:- var a[5]; Here var is data type , a is array name with size 5,you can store 5 values. Memory Representation of Array:-

10 20 30 40 50

In JavaScript, array can also holds mixed data type as the following, Example:- var a[5];

101 10.25 Welcome JavaScript 1995 Here, a[0],a[4] stored integer values a[1] stored floating value and a[2],a[3] stored string value Creating an Array:-

JavaScript supports arrays in three different ways, 1. type array-name = [ “values” ]; 2. type array-name = new Array ( “values”); 3. type array-name = new Array ( “values”); Example:- var day=[“Monday”,”Tuesday”]; The above array stores two elements, each holding a text of string and array elements are surrounded by square brackets( [ ] ); The second approach is using new operator, we can allocate memory dynamically for the arrays. Example:- var number = new Array(10, 10.25); The contents of the array is surrounded by parenthesis because they are parameters through the constructors of the array object. In last approach, we can pass the length of an array instead of elements. Example:- var number = new Array(4); Adding Elements to an Array:-

If we want to add an item to an array which already full, but javascript simply extends the array and insert the new item. Example:- day[5] = “Friday”; number[3]=100; Accessing an Array:-

You can refer to a particular element in an array by referring to the name of the array and the index number. By default, index number starts at ‘0’. Example: document.write(day[1]); document.write(day[2]);

Example:- <html> <head> <title>Array</title> </head> <body> <script type="text/javascript"> var data = [10,10.5,"Welcome","to","javascript"]; var i; document.write("Elements in array :"+"<br>"); for(i=0;i<data.length;i++) { document.write("data[" +i+ "]="+data[i]+"<br>"); } </script> </body> </html> Here, data.length built-in function, which takes automatically length of an array as 4.

Function in JavaScript:-

A Function is a piece of code that performs specific task. We can write the functions in the JavaScript for bringing the modularity in the script. Separate functions can be created for each separate task. This helps in finding the error from the

program efficiently. We can define the function anywhere in the script either in head or body section or both. The standard practice to define the function in head section and call that function from the body

section. The keyword function is used while defining the function. Syntax:- function function-name (arglist) { ----- // body of the function } The function-name can be any combination of letters, digit and underscore( _ ). But the function-name cannot contain space. The body of function is surrounded by curly braces ‘{ }’.

Output:-

Example1:- <html> <head> <title>Function</title> <script type = "text/javascript"> function myfunction() { document.write("Welcome to JavaScript Programming Language"); } </script> </head> <body> <script type="text/javascript"> document.write("Hello user..." +"<br>"); myfunction(); </script> </body> </html> In the above program, from body section, myfunction() is calls the function and their respective code is written in head part. Similarly, we can pass some arguments to the function. In the following program, we have passed arguments to function and returning values from function part to called function. Example 2:- <html> <head> <title>Function</title> <script type = "text/javascript"> function myfunction1(str1,str2) { str = "It was developed by " +str1+" "+str2; return str; } </script> </head> <body> <script type="text/javascript"> var str; document.write("Welcome to JavaScript Programming Language..." +"<br>"); str=myfunction1("Brendan Eich","in 1995"); document.write(str); </script> </body> </html>

Output:-

Output:-