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



== 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



& 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"

http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=javascript_conditional_operator



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:

http://www.tutorialspoint.com/xhtml/xhtml_doctypes.htm



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)

Engineering