How to make web pages interactive?

DHTML (Dynamic HTML) can be used.

DHTML is not a standard or a new version of HTML. It is a buzz-word that indicates the use of HTML, cascaded style sheets (CSS) and various scripting languages to make web pages interactive.

According to W3C:"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

With CSS we can change the style of any element. But we need a map of all the elements in the web page to be able to access them. Document Object Model (DOM) provides just that. Scripting languages help us in accessing elements and event handlers are used to call scripts.

What do we want to do?Change style e.g. colour changes when mouse is over some title.Content changes e.g. we had <H1>Old heading<h1> but when a user clicks on some button, it changes to "New heading".In normal HTML we cannot do it.What is required??We should be able to identify each element in the page. For example we should know where <H1> has been used. A page can have an element several times so we should be able to identify each occurring of an element. This is done by DOM which creates a map of each element.

Document Object Model (DOM)

What is an Object?A self contained entity that has attributes (represented as properties) and behaviour (represented by methods).

A Browser displays an HTML document in a window.

A window has a name, a length, a width, a parent etc. These are its properties. It can display a document, it can be closed or minimized etc. These are its behaviour. A window is an object.

Properties are represented by variables. Properties of a window object are accessible to any code segment written inside the HTML document being displayed by window object. Such variables are called global variables.

We may have more than one windows like in frames. Variables of each window are local to it.

document property - a reference to Document object. Frames array.

Main objects of DOM

Document

Radio

FormLink Anchor

Select Button/Submit/Reset

Text/ Text Area

Checkbox

The Browser

Window / FrameMath Date Navigator Other

Each one of the objects has a number of methods and properties.

A property is an attribute belonging to an object. E.g. background colour or the font colour of a document are its properties. Length of a text field is its property.

Examples of the properties of various objects:Window Object: closed, parent, name, length, top.Document Object: location, title, referrer, forms[], links[].Form Object: action, checked, name, method, value.

DOM Continued

A method is an action that an object can take. E.g setDate, getDate are methods of the date object.

Examples of methods of various objects:Window methods: open(), close(), clear, setTimeout, clearTimeout.Document methods: write, writeln.Form methods: submit, select, focus, blur, click.User interface methods: alert, confirm, prompt.

Use “dot operator” to access a property or method of an object. E.g document.write(“Hello”); document.bgColor=“red”;

DOM Continued

Event Handlers

An event is a condition generated by the browser when some action takes place. It is usually the result of some action by the user e.g. clicking on a button by a mouse pointer generates an event ‘onClick’. Other examples of events are:

onChange Trigger when text changes in a text box,

onLoad Triggers when a document has been loaded,

onMouseOver Triggers when mouse passes over hypertext,

onSelect Triggers when text is selected in a text box,

onSubmit Triggers when a form is submitted to server.

Events are used to call portions of code (functions) written in JavaScript or VBScript.

Cascaded Style Sheets (CSS)

Styles define how to display HTML elements.

Style sheets are collection of defined styles. They can be in an external file linked in an HTML document or written inside the HTML document using <style> .. </style> tags.

Why CSS?

Separates the content of documents from formatting instructions. Change the format of an entire site requires changing the style sheet only.

Cascading order:Browser default

External Style Sheet

Internal Style Sheet (inside the <head> tag)

Inline Style (inside HTML element)

Syntax:

selector {property: value}

The selector is normally the element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:

p{ text-align: center; color: red; font-family: arial}

h1, h2, h3, h4, h5, h6 { color: green}

Examples in notepad files (including style classes, span and div)

Java ScriptIs not Java though similarities in syntax. (not oo)

Advantages:

Widely supported

Gives easy access to document objects and can manipulate most of them

Can create interesting animations without long download times.

No special plug-in required

Relatively secure - cannot read or write local disks

Disadvantages:

Browsers implement their own DOM

If the script does not work, the page is useless

Complex scripts can take long time to start up.

How to Use JavaScript

Inside “head” tag:<html>

<head>

<title> Java Script example</title>

<script language=“javascript”>

<!--

//Javascript code goes here.

-->

</script>

</head>

<body>

……

</body>

</html>

How to Use JavaScript

Inside “head” tag but using external file:<html>

<head>

<title> Java Script example</title>

<script language=“javascript” src=“sample.js”>

</script>

</head>

<body>

……

</body>

</html>

How to Use JavaScript

Inside “body” tag:<html>

<head>

<title> Java Script example</title>

</head>

<body>

<script language=“javascript”>

<!--

//Javascript code goes here.

-->

</script>

……

</body>

</html>

Variables and Data Types

• A variable is a named value that can be used in a program.

E.g. x=6; y=7;

• A variable name must begin with a letter, digit or underscore

• Spaces cannot be used in a variable name

• Names are case sensitive, myvalue, Myvalue, MyValue

• A reserved word cannot be used as a name. (var, void, if)

•A JS variable can hold four types of data:

numeric, string, boolean and null.

• A variable is declared by reserved word “var”

var first = 23;

Data Types

Numeric: These are basic numbers like 2, 22, 220 or 2.23,

-.5, 3e23, 7.1e21 etc.

Strings: They are collections of zero or more characters delimited by single or double quotes.

My_name = "Johm Smith"

My_name = 'John Smith'

My_name = "512.14"

My_name = 512.14 is not a string!

How to write special characters inside a string?

Value = "Use 'single quotes' inside double quotes"

value = "Use a \\ for \"double quotes\""

Data Types and OperatorsBoolean: They hold a value of either "true" or "False" and are often used to hold the results of conditional tests. Null: A null value is one that has not been decided yet. It does not mean nil or zero.Operators:Numeric Operators: +, -, *, /, %Relational: <, >, >=, <=, ==, !=Logical AND: && (True if both operands are true)Logical OR: || (True if one of the operands is true)Logical NOT: ! (returns false if operand evaluates to true)Assignment: =, +=, -= , *= etc.Increment/Decrement: ++, --String concatenation: "June " + 2002 > "June 2002"2002 + " June" > "2002 June"7 * "3" > forced to number as * is a numeric operator7 * "June" cannot be converted to anumber so 'NaN'

Built-in functions

Some of the examples are:

concat(“string”, “string”)

string_object.toLowerCase()

string_object.toUpperCase()

max(value1, value2)

min(value1, value2)

parseFloat(string)

parseInt(string)

pow(value, power)

Screen Output: document.write(), alert(), prompt(), option()

Control Structures

if (condition) {statements}

else {statements}

for(counter = 0; counter <= n; counter++)

{statements to be repeated}

initialize counter

while (boolean condition)

{statements to be repeated

increment counter

}

Arrays

An array is an ordered set of data elements that can be accessed through a single variable name. (names of class)

var data = new Array(4);

data[2] = “Monday”;

Index is used to access an element of array. Index starts with 0; an n-element array has index from 0 to n-1.

Alternately: var data = ["Monday", "Tuesday", 34, 2.5, "Thursday"];

Or

var days = new Array("Monday", "Tuesday", 34, 2.5, "Wednesday", "Thursday");

Array Methods: length, sort, push, pop, shift, unshift, toString etc.

Functions

A function consists of one or more lines of code that perform a specific task. Most functions have a number of statements.

Syntax:

function function_name ()

{ body of function --- variables and statements}

or

function function_name(list of arguments)

{body of function}

JavaScript Examples

Java Script is case sensitive.

Examples in notepad files.

alert(“Welcome to JavaScript”);

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

prompt(“input your name:”);

other examples

VBScript

VB Script is a Microsoft Technology.

Can be used only on Windows platforms.

Supports DOM.

In many ways similar to Java Script.

Not case sensitive.

Document.Write(), document.write()

Can be placed in “head” or “body” sections.<html> <head> <script type="text/vbscript"> some statements </script> </head>

VB Script

A variable name:

Must begin with a letter Cannot contain a period (.) Cannot exceed 255 characters Can be declared by reserved word “dim”

Only one data type - variant - can store different types

examples:

dim name (Option Explicit forces use of dim) name=”Ashoke" document.write("My name is: " & name) (Note & in VBS instead of + in JS)Array variables: dim names(2) declares an array of THREE elements.

Operators

Arithmetic operators are similar to those in Java Script. Two major differences are:

\ for integer division and ^ for exponentiation

Relation operators are also similar except:

= sign for testing equality (= = in JS)

< > not equal to (!= in JS)

Logical Operators are:

AND OR NOT

' This is a comment in VBScript

VB Script

Subroutines do not return a value.

Sub examplesub() some statementsEnd Subor

Sub examplesub(argument1,argument2) some statementsEnd Sub

VB Script

Functions: Can return values

Function myfunction() some statements myfunction=some valueEnd Functionor

Function myfunction(argument1,argument2) some statements myfunction=some valueEnd Function

VB Script

Like Java Script, VBS has:

conditional statements:

if….then (only single statement)

if ….then…else…end if (Group of statements)

if ….then…..elseif…..then…. End if (nested if)

Loops:

for…next (Repeat a block of code N times) For i=1 to 10 some code NextKey word step can change increment (2, -2,etc) For i=2 To 10 Step 2 some code Next

VB Script

While Loops: Do While i>10 some code Loop

Do some code Loop While i>10

Do Until i=10 some code Loop

Do some code Loop Until i=10

InputBox(prompt, title, default string, xpos, ypos) andMsgBox(message, style, title) can be used in a number of different ways e.g. dim fname fname=InputBox("Enter your name:")'optional arguments MsgBox("Your name is " & fname) msgbox() dim answer answer=MsgBox("Hello everyone!",0,"Example") document.write(answer)

0 = vbOKOnly - OK button only

1 = vbOKCancel - OK and Cancel buttons

2 = vbAbortRetryIgnore - Abort, Retry, and Ignore buttons

3 = vbYesNoCancel - Yes, No, and Cancel buttons

4 = vbYesNo - Yes and No buttons

5 = vbRetryCancel - Retry and Cancel buttons

VB Script