Iwt note(module 2)

GANDHI INSTITUTE FOR EDUCATION & TECHNOLOGY
SUBJECT: INTERNET & WEBTECHNOLOGY
PREPARED BY: - Asst. Prof. SANTOSH KUMAR RATH
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
MODULE-2
PAGE 1
PCIT4301 INTERNET AND WEB TECHNOLOGY (3-0-0)
Module –I (Lecture Hour 12)
The Internet and WWW
Understanding the WWW and the Internet, Emergence of Web, Web Servers, Web
Browsers, Protocols, Building Web Sites
HTML
Planning for designing Web pages, Model and structure for a Website, Developing
Websites, Basic HTML using images links, Lists, Tables and Forms, Frames for designing a
good interactive website
Module –II (Lecture Hour 12)
JAVA Script
Programming Fundamentals, Statements, Expressions, Operators, Popup Boxes,
Control Statements, Try…. Catch Statement, Throw Statement, and Objects of
JavaScript: Date object, array object, Boolean object, math object
CSS
External Style Sheets, Internal Style Sheets, Inline Style, The class selector, div & span tag
DOM
HTML DOM, inner HTML, Dynamic HTML (DHTML), DHTML form, XML DOM
Module –III (Lecture Hour 11)
CGI/PERL
Introduction to CGI, Testing & Debugging Perl CGI Script, Using Scalar variables and
operators in Perl
Java Applet
Introduction to Java, Writing Java Applets, Life cycle of applet
Textbooks
1. Web Warrior Guide to Web Design Technologies, Don Gosselin, Joel Sklar & others,
Cengage Learning
Reference Books
1. Web Programming: Building Internet Applications, Chris Bates, Wiley Dreamtech
2. Programming the World Wide Web, Robert W Sebesta, Pearson
3. Web Technologies, Uttam K Roy, Oxford
4. Web Technology: A developer perspective, Gopalan & Akilandeswari, PHI

MODULE-2
PAGE 2
INTRODUCTION TO JAVA SCRIPT
What is Java Script?
• It is a programming language.
• It is an interpreted language.
• It is object-based programming.
• It is widely used and supported
• It is accessible to the beginner.
Uses of JavaScript
• Use it to add multimedia elements With JavaScript you can show, hide, change, resize images,
and create image rollovers. You can create scrolling text across the status bar.
• Create pages dynamically Based on the user's choices, the date, or other external data,
JavaScript can produce pages that are customized to the user.
• Interact with the user it can do some processing of forms and can validate user input when the
user submits the form.
Writing JavaScript
JavaScript code is typically embedded in the HTML, to be interpreted and run by the
client's browser. Here are some tips to remember when writing JavaScript commands.
• JavaScript code is case sensitive
• White space between words and tabs are ignored
• Line breaks are ignored except within a statement
• JavaScript statements end with a semicolon;
The SCRIPT Tag
The <SCRIPT> tag alerts a browser that JavaScript code follows. It is typically embedded in the
HTML.
<SCRIPT language = "JavaScript">
Statements
</SCRIPT>
SCRIPT Example
• Open "script_tag.html" in a browser.
• View the Source
• Put the cursor after <! – Enter code below � and enter the following:

MODULE-2
PAGE 3
alert ("Welcome to the script tag test page.")
</SCRIPT>
• Save the changes by choosing Save from the File menu.
• Then Refresh the browser by clicking the Refresh or Reload button.
Implementing JavaScript
There are three ways to add JavaScript commands to your Web Pages.
• Embedding code
• Inline code
• External file
External File
You can use the SRC attribute of the <SCRIPT> tag to call JavaScript code from an external text
file. This is useful if you have a lot of code or you want to run it from several pages, because any
number of pages can call the same external JavaScript file. The text file itself contains no HTML
tags. It is call by the following tag:
<SCRIPT SRC="filename.js">
</SCRIPT>
External Example
• Open "external.html" in a browser
• View the Source
• Put the cursor after <! – Enter code here and enter:
<SCRIPT language = "JavaScript" SRC = "external.js">
</SCRIPT>
• Save the changes and Refresh the browser.
Programming Basics
Programmers use variables to store values. A variable can hold several types of data. In
JavaScript you don't have to declare a variable's data type before using it. Any variable can hold
any JavaScript data type, including:
• String data
• Numbers
• Boolean values (T/F)

MODULE-2
PAGE 4
Variable Names
There are rules and conventions in naming variables in any programming language. It is good
practice to use descriptive names for variables. The following are the JavaScript rules:
• The variable name must start with a letter or an underscore.
Example: firstName or _myName
• You can use numbers in a variable name, but not as the first character.
Example: name01 or tuition$
• You can't use space to separate characters.
Example: userName not user Name
• Capitalize the first letter of every word except the first
Example: salesTax or userFirstName
Variables
• To declare variables, use the keyword var and the variable name: var userName
• To assign values to variables, add an equal sign and the value: var userName = "Smith"
var price = 100
Functions
With functions, you can give a name to a whole block of code, allowing you to reference it from
anywhere in your program. JavaScript has built-in functions for several predefined operations.
Here are three some functions.
• alert ("message")
• confirm ("message")
• prompt ("message")
Function Example
• Open "functions. html" and View the Source
• Put the cursor after " // add code here " and enter:
• var userName
var willDoSurvey
userName = prompt("Enter your name", "")
alert("Thank you, " + userName)
• Save the changes and Refresh the page

MODULE-2
PAGE 5
User-Defined Functions
With user-defined functions, you can name a block of code and call it when you need it. You
define a function in the HEAD section of a web page. It is defined with the function keyword,
followed by the function name and any arguments.
function functionName(argument)
{
statements
}
User-Defined Example
• Open "userdefined.html" and View the Source
• Put the cursor after "<! – enter function �" and enter:
function showAlert() {
alert("this is a user-defined function.")
}
</SCRIPT>
In the BODY, put the cursor after "<! – enter the button def here ->"
and enter:
<INPUT type-"button" value="Run the Function"
onClick="showAlert()">
• Save the changes and Refresh the browser.
• Boolean values (T/F)

MODULE-2
PAGE 6
JavaScript Statements
JavaScript is a sequence of statements to be executed by the browser.
JavaScript statements are "commands" to the browser. The purpose of the statements is to tell the
browser what to do.
This JavaScript statement tells the browser to write "Hello Dolly" inside an HTML element with
id="demo":
document.getElementById ("demo").innerHTML="Hello Dolly";
Semicolon;
Semicolon separates JavaScript statements. Normally you add a semicolon at the end of each
executable statement. Using semicolons also makes it possible to write many statements on one
line.
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is
executed by the browser in the sequence they are written. This example will manipulate two
HTML elements:
Example
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
JavaScript is Case Sensitive
JavaScript is case sensitive. Watch your capitalization closely when you write JavaScript
statements: function getElementById is not the same as getElementbyID. A variable named
myVariable is not the same as MyVariable.
White Space:
JavaScript ignores extra spaces. You can add white space to your script to make it more readable.
The following lines are equivalent:
var name="Hege";
var name = "Hege";

MODULE-2
PAGE 7
JavaScript operator
Simple answer can be given using expression 4 + 5 is equal to 9. Here 4 and 5 are called
operands and + is called operator. JavaScript language supports following type of operators.
 Arithmetic Operators
 Comparison Operators
 Logical (or Relational) Operators
 Assignment Operators
 Conditional (or ternary) Operators
The Arithmetic Operators:
 There are following arithmetic operators supported by JavaScript language:
 Assume variable A holds 10 and variable B holds 20 then:
Operator Description Example
+ Adds two operands A + B will give 30
- Subtracts second operand from the first A - B will give -10
* Multiply both operands A * B will give 200
/ Divide numerator by denumerator B / A will give 2
%
Modulus Operator and remainder of after an
integer division
B % A will give 0
++ Increment operator, increases integer value by one A++ will give 11
-- Decrement operator, decreases integer value by one A-- will give 9

MODULE-2
PAGE 8
The Comparison Operators:
There are following comparison operators supported by JavaScript language
Assume variable A holds 10 and variable B holds 20 then:
==
Checks if the value of two operands is equal or not, if yes then
condition becomes true.
(A == B) is
not true.
!=
Checks if the values of two operands are equal or not, if values are
not equal then condition becomes true.
(A != B) is
true.
>
Checks if the value of left operand is greater than the value of right
operand, if yes then condition becomes true.
(A > B) is not
true.
<
Checks if the value of left operand is less than the value of right
operand, if yes then condition becomes true.
(A < B) is
true.
>=
Checks if the value of left operand is greater than or equal to the
value of right operand, if yes then condition becomes true.
(A >= B) is
not true.
<=
Checks if the value of left operand is less than or equal to the value
of right operand, if yes then condition becomes true.
(A <= B) is
true.
The Logical Operators:
There are following logical operators supported by JavaScript language .Assume variable A
holds 10 and variable B holds 20 then:
&&
Called Logical AND operator. If both the operands are non zero then
then condition becomes true.
(A && B) is
true.
||
Called Logical OR Operator. If any of the two operands are non zero
then then condition becomes true.
(A || B) is
true.
!
Called Logical NOT Operator. Use to reverses the logical state of its
operand. If a condition is true then Logical NOT operator will make
false.
!(A && B) is
false.

MODULE-2
PAGE 9
The Bitwise Operators:
There are following bitwise operators supported by JavaScript language
Assume variable A holds 2 and variable B holds 3 then:
&
Called Bitwise AND operator. It performs a Boolean AND operation on each bit of
its integer arguments.
(A & B) is
2 .
|
Called Bitwise OR Operator. It performs a Boolean OR operation on each bit of its
integer arguments.
(A | B) is
3.
^
Called Bitwise XOR Operator. It performs a Boolean exclusive OR operation on
each bit of its integer arguments. Exclusive OR means that either operand one is
true or operand two is true, but not both.
(A ^ B) is
1.
~
Called Bitwise NOT Operator. It is a is a unary operator and operates by reversing
all bits in the operand.
(~B) is -4
.
<<
Called Bitwise Shift Left Operator. It moves all bits in its first operand to the left
by the number of places specified in the second operand. New bits are filled with
zeros. Shifting a value left by one position is equivalent to multiplying by 2,
shifting two positions is equivalent to multiplying by 4, etc.
(A << 1)
is 4.
>>
Called Bitwise Shift Right with Sign Operator. It moves all bits in its first operand
to the right by the number of places specified in the second operand. The bits
filled in on the left depend on the sign bit of the original operand, in order to
preserve the sign of the result. If the first operand is positive, the result has zeros
placed in the high bits; if the first operand is negative, the result has ones placed
in the high bits. Shifting a value right one place is equivalent to dividing by 2
(discarding the remainder), shifting right two places is equivalent to integer
division by 4, and so on.
(A >> 1)
is 1.

MODULE-2
PAGE 10
>>>
Called Bitwise Shift Right with Zero Operator. This operator is just like the >>
operator, except that the bits shifted in on the left are always zero,
(A >>> 1)
is 1.
The Assignment Operators:
There are following assignment operators supported by JavaScript language:
=
Simple assignment operator, Assigns values from right side
operands to left side operand
C = A + B will assigne
value of A + B into C
+=
Add AND assignment operator, It adds right operand to the left
operand and assign the result to left operand
C += A is equivalent to C
= C + A
-=
Subtract AND assignment operator, It subtracts right operand
from the left operand and assign the result to left operand
C -= A is equivalent to C =
C - A
*=
Multiply AND assignment operator, It multiplies right operand
with the left operand and assign the result to left operand
C *= A is equivalent to C
= C * A
/=
Divide AND assignment operator, It divides left operand with the
right operand and assign the result to left operand
C /= A is equivalent to C =
C / A
%=
Modulus AND assignment operator, It takes modulus using two
operands and assign the result to left operand
C %= A is equivalent to C
= C % A
Note: Same logic applies to Bitwise operators so they will become like <<=, >>=, >>=, &=, |=
and ^=.

MODULE-2
PAGE 11
Miscellaneous Operator
The Conditional Operator (? :)
There is an oprator called conditional operator. This first evaluates an expression for a true or
false value and then execute one of the two given statements depending upon the result of the
evaluation. The conditioanl operator has this syntax:
? : Conditional Expression If Condition is true ? Then value X : Otherwise value Y
To understand this operator in better way you can Try it yourself.
The type of Operator
The typeof is a unary operator that is placed before its single operand, which can be of any type.
Its value is a string indicating the data type of the operand.
The typeof operator evaluates to "number", "string", or "boolean" if its operand is a number,
string, or boolean value and returns true or false based on the evaluation.
Here is the list of return values for the typeof Operator :
Type String Returned by typeof
Number "number"
String "string"
Boolean "boolean"
Object "object"

MODULE-2
PAGE 12
Function "function"
Undefined "undefined"
Null "object"
Popup Boxes
In JavaScript you can find three types of pop alert boxes. These are alert, confirm, prompt pop up
boxes found in JavaScript. You are asking how to create Confirm, Alert, pop up box in
JavaScript. Below given example for its.
The createPopup() method is used to create a pop-up window.
Syntax: window.createPopup()
Example: Create a pop-up window
<html>
<head>
<script>
function show_popup()
{
var p=window.createPopup()
var pbody=p.document.body
pbody.style.backgroundColor="lime"
pbody.style.border="solid black 1px"
pbody.innerHTML="This is a pop-up! Click outside to close."
p.show(150,150,200,50,document.body)
}
</script>
</head>
<body>
<button onclick="show_popup()">Create pop-up!</button></body>
</html>

MODULE-2
PAGE 13
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax : window.alert("sometext");
The window.alert method can be written without the window prefix.
Example
<! DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box">
</body>
</html>
Output:

MODULE-2
PAGE 14
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax : window.confirm("sometext");
The window.confirm() method can be written without the window prefix.
Example
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
{
var x;
var r=confirm("Press a button!");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Output:

MODULE-2
PAGE 15
Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
 if statement - use this statement to execute some code only if a specified condition is true
 if...else statement - use this statement to execute some code if the condition is true and
another code if the condition is false
 if...else if....else statement - use this statement to select one of many blocks of code to be
executed
 switch statement - use this statement to select one of many blocks of code to be executed
IF STATEMENT
Use the if statement to execute some code only if a specified condition is true.
Syntax
if (condition)
{
code to be executed if condition is true
}
Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript
error!
Example
Make a "Good day" greeting if the time is less than 20:00:
if (time<20)
{
x="Good day";
}
The result of x will be: Good day

MODULE-2
PAGE 16
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a "Good day" greeting if the time is less than 20:00.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Output:

MODULE-2
PAGE 17
IF...ELSE STATEMENT
Use the if....else statement to execute some code if a condition is true and another code if the
condition is not true.
Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
Example
If the time is less than 20:00, you will get a "Good day" greeting, otherwise you will get a "Good
evening" greeting
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
The result of x will be:
Good day

MODULE-2
PAGE 18
IF...ELSE IF...ELSE STATEMENT
Use the if....else if...else statement to select one of several blocks of code to be executed.
Syntax
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}
Example
If the time is less than 10:00, you will get a "Good morning" greeting, if not, but the time is less
than 20:00, you will get a "Good day" greeting, otherwise you will get a "Good evening"
greeting:
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
The result of x will be : Good day

MODULE-2
PAGE 19
THE JAVASCRIPT SWITCH STATEMENT
The switch statement is used to perform different action based on different conditions.
Use the switch statement to select one of many blocks of code to be executed.
Syntax
switch (n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
This is how it works: First we have a single expression n (most often a variable), that is
evaluated once. The value of the expression is then compared with the values for each case in the
structure. If there is a match, the block of code associated with that case is executed. Use break
to prevent the code from running into the next case automatically.
Example
Display today's weekday-name. Note that Sunday=0, Monday=1, Tuesday=2, etc:
var day=new Date().getDay();
switch (day)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";

MODULE-2
PAGE 20
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
}
The result of x will be:
Today it's Wednesday
JAVASCRIPT FOR LOOP
Loops are handy, if you want to run the same code over and over again, each time with a
different value.
Often this is the case when working with arrays:
Instead of writing:
document.write(cars[0] + "<br>");

MODULE-2
PAGE 21
You can write:
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
Example:
<!DOCTYPE html>
<html>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>
Output:

MODULE-2
PAGE 22
JAVASCRIPT WHILE LOOP
Loops can execute a block of code as long as a specified condition is true.
The While Loop
The while loop loops through a block of code as long as a specified condition is true.
Syntax
while (condition)
{
code block to be executed
}
Example
The loop in this example will continue to run as long as the variable i is less than 5:
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
Output:

MODULE-2
PAGE 23
THE DO/WHILE LOOP
The do/while loop is a variant of the while loop. This loop will execute the code block once,
before checking if the condition is true, and then it will repeat the loop as long as the condition is
true.
Syntax:
do
{
code block to be executed
}
while (condition);
Example
The example below uses a do/while loop. The loop will always be executed at least once, even if
the condition is false, because the code block is executed before the condition is tested:
Example
do
{
i++;
}
while (i<5);

MODULE-2
PAGE 24
JAVASCRIPT BREAK AND CONTINUE
The Break Statement
You have already seen the break statement used in an earlier chapter of this tutorial. It was used
to "jump out" of a switch () statement.
The break statement can also be used to jump out of a loop.
The break statement breaks the loop and continues executing the code after the loop (if any):
Example
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
}
Since the if statement has only one single line of code, the braces can be omitted:
for (i=0;i<10;i++)
{
if (i==3) break;
}
The Continue Statement
The continue statement breaks one iteration (in the loop), if a specified condition occurs, and
continues with the next iteration in the loop.
This example skips the value of 3:

MODULE-2
PAGE 25
Example
for (i=0;i<=10;i++)
{
if (i==3) continue;
}
JavaScript Labels
As you have already seen, in the chapter about the switch statement, JavaScript statements can
be labeled.To label JavaScript statements you precede the statements with a colon:
label:
statements
The break and the continue statements are the only JavaScript statements that can "jump out of"
a code block.
Syntax: break labelname;
continue labelname;
The continue statement (with or without a label reference) can only be used inside a loop. The
break statement, without a label reference, can only be used inside a loop or a switch.With a
label reference, it can be used to "jump out of" any JavaScript code block:
Example
cars=["BMW","Volvo","Saab","Ford"];
list:
{
break list;
}

MODULE-2
PAGE 26
JavaScript Objects
"Everything" in JavaScript is an Object: a String, a Number, an Array, a Date....
In JavaScript, an object is data, with properties and methods.
Properties and Methods
Properties are values associated with an object.
Methods are actions that can be performed on objects.
Objects in JavaScript:
In JavaScript, objects are data (variables), with properties and methods.
When you declare a JavaScript variable like this:
var txt = "Hello";
You actually create a JavaScript String object. The String object has a built-in property called
length. For the string above, length has the value 5. The String object also has several built-in
methods.
Creating JavaScript Objects
Almost "everything" in JavaScript is an object. Strings, Dates, Arrays, Functions.
You can also create your own objects.
This example creates an object called "person", and adds four properties to it:
Example
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

MODULE-2
PAGE 27
<!DOCTYPE html>
<html>
<body>
<script>
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>
Output: John is 50 years old.
Accessing Object Properties:
The syntax for accessing the property of an object is:
objectName.propertyName
This example uses the length property of the String object to find the length of a string:
var message="Hello World!";
var x=message.length;
The value of x, after execution of the code above will be:
12
Accessing Object Methods
You can call a method with the following syntax:
objectName.methodName()
This example uses the toUpperCase() method of the String object, to convert a text to uppercase:
var message="Hello world!";
var x=message.toUpperCase();
The value of x, after execution of the code above will be:
HELLO WORLD!

MODULE-2
PAGE 28
JavaScript Date Object
The Date object is used to work with dates and times.
Create a Date Object
The Date object is used to work with dates and times.
Date objects are created with the Date() constructor.
There are four ways of initiating a date:
new Date() // current date and time
new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
Some examples of initiating a date:
var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)
Set Dates
We can easily manipulate the date by using the methods available for the Date object.
In the example below we set a Date object to a specific date (14th January 2010):
var myDate=new Date();
myDate.setFullYear(2010,0,14);
And in the following example we set a Date object to be 5 days into the future:
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

MODULE-2
PAGE 29
Note: If adding five days to a date shifts the month or year, the changes are handled
automatically by the Date object itself!
Compare Two Dates
The Date object is also used to compare two dates.
The following example compares today's date with the 14th January 2100:
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();
if (x>today)
{
alert("Today is before 14th January 2100");
}
else
{
alert("Today is after 14th January 2100");
}
JavaScript Array Object
The Array object is used to store multiple values in a single variable.
Create an array, and assign values to it:
Example
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
What is an Array?
An array is a special variable, which can hold more than one value at a time.

MODULE-2
PAGE 30
If you have a list of items (a list of car names, for example), storing the cars in single variables
could look like this:
var car1="Saab";
var car2="Volvo";
var car3="BMW";
However, what if you want to loop through the cars and find a specific one? And what if you had
not 3 cars, but 300?
The solution is an array!
An array can hold many values under a single name, and you can access the values by referring
to an index number.
Create an Array
An array can be created in three ways.
The following code creates an Array object called myCars:
1: Regular:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: Condensed:
var myCars=new Array("Saab","Volvo","BMW");
3: Literal:
var myCars=["Saab","Volvo","BMW"];

MODULE-2
PAGE 31
Access an Array
You refer to an element in an array by referring to the index number.
This statement access the value of the first element in myCars:
var name=myCars[0];
This statement modifies the first element in myCars:
myCars[0]="Opel";
You Can Have Different Objects in One Array
All JavaScript variables are objects. Array elements are objects. Functions are objects.
Because of this, you can have variables of different types in the same Array.
You can have objects in an Array. You can have functions in an Array. You can have arrays in
an Array:
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
Array Methods and Properties
The Array object has predefined properties and methods:
var x=myCars.length // the number of elements in myCars
var y=myCars.indexOf("Volvo") // the index position of "Volvo"
Complete Array Object Reference
For a complete reference of all properties and methods, go to our complete Array object
reference.
The reference contains a description (and more examples) of all Array properties and methods.

MODULE-2
PAGE 32
Create New Methods
Prototype is a global constructor in JavaScript. It can construct new properties and methods for
any JavaScript Objects.
Example: Make a new Array method.
Array.prototype.ucase=function()
{
for (i=0;i<this.length;i++)
{this[i]=this[i].toUpperCase();}
}
JavaScript Number Object
JavaScript has only one type of number.Numbers can be written with, or without decimals.
JavaScript Numbers
JavaScript numbers can be written with, or without decimals:
Example
var pi=3.14; // Written with decimals
var x=34; // Written without decimals
Extra large or extra small numbers can be written with scientific (exponent) notation:
Example
var y=123e5; // 12300000
var z=123e-5; // 0.00123

MODULE-2
PAGE 33
JavaScript Boolean Object
The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).
Complete Boolean Object Reference
For a complete reference of all the properties and methods that can be used with the Boolean
object.
The reference contains a brief description and examples of use for each property and method!
Create a Boolean Object
The Boolean object represents two values: "true" or "false".
The following code creates a Boolean object called myBoolean:
var myBoolean=new Boolean();
If the Boolean object has no initial value, or if the passed value is one of the following:
 0
 -0
 null
 ""
 false
 undefined
 NaN
the object is set to false. For any other value it is set to true (even with the string "false")!

MODULE-2
PAGE 34
JavaScript Math Object
The Math object allows you to perform mathematical tasks.
Complete Math Object Reference
For a complete reference of all the properties and methods that can be used with the Math object,
The reference contains a brief description and examples of use for each property and method!
Math Object
The Math object allows you to perform mathematical tasks.
The Math object includes several mathematical constants and methods.
Syntax for using properties/methods of Math:
var x=Math.PI;
var y=Math.sqrt(16);
Note: Math is not a constructor. All properties and methods of Math can be called by using Math
as an object without creating it.
Mathematical Constants
JavaScript provides eight mathematical constants that can be accessed from the Math object.
These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2
log of E, and base-10 log of E.
You may reference these constants from your JavaScript like this:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10

MODULE-2
PAGE 35
Math.LOG2E
Math.LOG10E
Mathematical Methods
In addition to the mathematical constants that can be accessed from the Math object there are
also several methods available.
The following example uses the round() method of the Math object to round a number to the
nearest integer:
document.write(Math.round(4.7));
The code above will result in the following output:
5
The following example uses the random() method of the Math object to return a random number
between 0 and 1:
document.write(Math.random());
The code above can result in the following output:
0.4189651519200158
The following example uses the floor() and random() methods of the Math object to return a
random number between 0 and 10:
document.write(Math.floor(Math.random()*11));
The code above can result in the following output:
9

MODULE-2
PAGE 36
Cascading Style Sheet
What is CSS?
 Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended
to simplify the process of making web pages presentable.
 CSS handles the look and feel part of a web page. Using CSS, you can control the color
of the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colors are used, as well as a variety of other effects.
 CSS is easy to learn and understand but it provides powerful control over the presentation
of an HTML document. Most commonly, CSS is combined with the markup languages
HTML or XHTML.
Advantages of CSS:
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML so you
can give far better look to your HTML page in comparison of HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
 Global web standards - Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages
to make them compatible to future browsers.
CSS Versions:
Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December
1996. This version describes the CSS language as well as a simple visual formatting model for
all the HTML tags. CSS2 was became a W3C recommendation in May 1998 and builds on
CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices,
downloadable fonts, element positioning and tables.

MODULE-2
PAGE 37
Example: of CSS
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.

MODULE-2
PAGE 38
Each declaration consists of a property and a value. The property is the style attribute you want
to change. Each property has a value.
CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by
curly brackets:
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example
p
{
color:red;
text-align:center;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

MODULE-2
PAGE 39
Internal Style Sheet
An internal style sheet is a section on an HTML page that contains style definitions. Internal
style sheets are defined by using the <style> tag within the <head> area of the document. Here
is an example of an internal style sheet:
<html>
<head>
<title>Internal Style Sheet Example</title>
<style>

</style>
</head>
<body>
<h1>Page With an Internal Style Sheet</h1>
<p>This page contains style definitions at the top of the HTML code.</p>
</body>
</html>
Internal style sheets allow a designer to define styles for an HTML page.

MODULE-2
PAGE 40
What is XHTML?
XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and more
strict version of HTML 4.01. If you already know HTML then you need to give littel attention to
learn this latest variant of HTML.
XHTML stands for EXtensible HyperText Markup Language and is the next step in the
evolution of the Internet. The XHTML 1.0 is the first document type in the XHTML family.
XHTML was developed by the W3C to help web developers make the transition from HTML to
XML. By migrating to XHTML today, web developers can enter the XML world with all of its
attendant benefits, while still remaining confident in their content's backward and future
compatibility.
Developers who migrate their content to XHTML 1.0 will realize the following benefits:
 XHTML documents are XML conforming. As such, they are readily viewed, edited, and
validated with standard XML tools.
 XHTML documents can be written to operate better than they did before in existing
browsers as well as in new browsers.
 XHTML documents can utilize applications like scripts and applets that rely upon either
the HTML Document Object Model or the XML Document Object Model.
Why XHTML?
XHTML has a more strict syntax rules in comparison of HTML. XHTML gives you a more
consistent, well structured format so that your webpages can be easily parsed and processed by
present and future web browsers. It also makes your website more easy to maintain, edit, convert
and format in the long run.
Since XHTML is an official standard of the World Wide Web Consortium (W3C), your website
will more likely will be more compatible to more browsers and will be rendered more accurately.
XHTML combines strength of HTML and XML and XHTML pages can be rendered by all
XML enabled devices.
XHTML defines a quality standard for your WebPages, if you follows that then your web pages
will be counted quality web pages and W3C certifies those pages with their quality stamp.

MODULE-2
PAGE 41
Here are the important points to remember while writing a new XHTML document or converting
existing HTML document into XHTML document:
 XHTML document must have a DOCTYPE declaration at the top of the document.
 All XHTML tags and attributes should be written in lower case only.
 All the XHTML tags will have their closing tags.
 All the attribute values must be quoted.
 Attribute minimization is forbidden.
 The id attribute replaces the name attribute.
 The language attribute of the script tag is deprecated
 All the tags should be properly nested
 Element Prohibitions
DOCTYPE Declaration:
All XHTML documents must have a DOCTYPE declaration at the top of document. There are
three types of DOCTYPE which are discussed in detail in XHTML Doctypes chapter. Below is
one of the examples of using DOCTYPE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
JavaScript HTML DOM
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:

MODULE-2
PAGE 42
The HTML DOM Tree
With a programmable object model, JavaScript gets all the power it needs to create dynamic
HTML:
 JavaScript can change all the HTML elements in the page
 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can react to all the events in the page
The XML DOM
The XML DOM defines a standard way for accessing and manipulating XML documents.
The XML DOM views an XML document as a tree-structure.
All elements can be accessed through the DOM tree. Their content (text and attributes) can be
modified or deleted, and new elements can be created. The elements, their text, and their
attributes are all known as nodes

Iwt note(module 2)

More Related Content

What's hot

Similar to Iwt note(module 2)

More from SANTOSH RATH

Recently uploaded

Iwt note(module 2)