Unit-3-1 Ds Web
Unit-3-1 Ds Web
Syllabus:-
1) What is DHTML?
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 DHTML
2) 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:-
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.
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.
3) 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:
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>.
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>
4) 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”).
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
2. charAt(index-val) This method will return the position of the character specified by its
index value.
4.toUpperCase( ) This function is used to convert the entire lower case letter to upper
case letter.
5.toLowerCase( ) This function is used to convert the entire upper case letter to lower
case letter.
6. valueOf( ) This function is used to display the value of the particular string.
7. substring(begin, end) This function return the substring specified by begin and end.
8. indexOf( ) 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 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) Return the absolute value of the number passed into it.
6. min(value1,value2) Returns the smallest value of the two values passed in it.
7. max(value1,value2) Returns the biggest value of the two values passed in it.
10. sin(value), cos(value), tan(value) 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:-
7) Statements in JavaScripts:-
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”);
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:-
function add(a,b)
{
return (a+b); //return value to called function
}
8) Operators in JavaScript:-
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.
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.
Identical equal === If both operands are equal and/or same data type, 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.
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 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>
Increment and decrement operators are unary operators that add or subtract one
from their operand, respectively
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.
Addition += Addition of operands and finally assign result += x result = result + y result = 22
to left operand.
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.
Bitwise AND & Return bitwise AND operation for given two operands.
Bitwise XOR ^ Return bitwise XOR operation for given two 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:-
Operator Description
(?:) Conditional Operator returns value based on the condition. It is like if-
else.
9) 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.
10 20 30 40 50
a[0] a[1] a[2] a[3] a[4]
In JavaScript, array can also holds mixed data type as the following,
Example:-
var a = [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:-
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.
The contents of the array is surrounded by parenthesis because they are parameters through the
constructors of the array object.
If we want to add an item to an array which already full, but javascript simply extends the array and
insert the new item.
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++) Output:-
{
document.write("data[" +i+ "]="+data[i]+"<br>");
}
</script>
</body>
</html>
Syntax:-
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 ‘{ }’.
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">
Output:-
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>
Output:-
</body>
</html>