SOME USEFUL STYLE SHEETS PROPERTIES

<< STYLE SHEETS 2

JAVA SCRIPTING 1 >>

E-COMMERCE IT430

Lesson 12

SOME USEFUL STYLE SHEETS PROPERTIES

Example position style

<HTML>

<STYLE>

DIV {font-size: 18pt}

</STYLE>

<BODY>

<DIV STYLE="position: absolute; left: 700px; top: 200px">Books Section</DIV>

<DIV STYLE="position: absolute; left: 200px; top: 150px">Toys Section</DIV>

<DIV STYLE="position: absolute; left: 500px; top: 100px">Music Section</DIV>

<DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes Section</DIV>

We must believe in luck. For how else can we explain the success of those we do'nt like?

This is an example of position styles.

</BODY></HTML>

Result is shown in Fig. 1 below.

Fig. 1

<HTML>

<STYLE>

DIV {font-size: 18pt}

</STYLE>

<BODY>

<DIV STYLE="position: absolute; left: 700px; top: 200px">Books Section</DIV>

<DIV STYLE="position: absolute; left: 200px; top: 150px">Toys Section</DIV>

<DIV STYLE="position: absolute; left: 500px; top: 100px">Music Section</DIV>

<DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes Section</DIV>

We must believe in luck. For how else can we explain the success of those we do'nt like?

This is an example of position styles.

</BODY></HTML>

E-COMMERCE IT430

Result is shown in Fig. 2 below.

Fig. 2

Positioning in the 3rd dimension

We can use the property `z-index' for positioning in the third dimension. For example,

<HTML>

<HEAD>

<TITLE>Style Sheet 3-D Positioning</TITLE>

</HEAD>

<STYLE>

DIV {font-size: 16pt; Color:red}

</STYLE>

<BODY>

<B>This text appears on top of the image.</B>

</DIV>

</BODY>

</HTML>

E-COMMERCE IT430

Result is shown in Fig. 3 below.

Fig. 3

Introduction to java script

Although JavaScript bears the name of java, it is a very different language that is used for a very different

purpose. It supports both web browser and server side scripting. Browser scripts are used to create dynamic

web pages that are more interactive, more responsive. Before discussing JavaScript, you should know some

basics. A variable defines a value stored at a location address in the computer that may be accessed through

the variable. For example Var i=3; means

Location name

Value at the location

65895

Location address

Rules for variables

Variable names can begin with an uppercase letter (A-Z), lower case letter (a-z), an underscore character (_),

or dollar sign ($). Remaining characters can be any of the above or from digits (0-9). In JavaScript variables

are case sensitive. It means that if you have a variable `money' you cannot write `Money' or `mONEY'. You

don't need to define the variable with the data type (rather it is not allowed in JavaScript)

General data types

They are as follows:

int or integer: This indicates the whole numbers like 78 or 98 etc.

float : It is a decimal fractions like 8.9 or 6.6 etc.

Char : It is any alphabet from A-Z or any digit or for that matter any of the characters on the

key board you can see. Digits defined as chars cannot have mathematical operation on them.

String: When more than one chars join they make a string.

Boolean: It just has true or false value. For example if you have variable `pass' as boolean it

can be true or false only.

These data types vary in exact definition depending on the language and tool you are using.

Some might have more data types then the ones discussed above. JavaScript Data types are

Number, Boolean, String, Null and Undefined.

Event handler

Events describe actions that occur as the result of user interaction with a web page or other browser-related

activities. For example, when a user clicks a hyperlink or a button or enters data in a form, an event is

generated informing the browser that action has occurred and that further processing is required. The

E-COMMERCE IT430

keywords responsible for activating certain actions on HTML document are called Event handlers. Some

common event handlers are as follows: onclick, ondbclick, onfocus , onload, onsubmit, onselect, onblur,

onchange, onmousedown, onmousemove, onmouseout, onmouseover.

Changing images using event handlers

Consider following examples:

<HTML>

<BODY>

<IMG SRC=contents.gif

WIDTH=170

HEIGHT=50

BORDER=0

NAME=picture

onmouseover="picture.src='search.gif';picture.width=250;

picture.height=100"

onmouseout="picture.src='contents.gif';picture.width=170;

picture.height=50">

</BODY>

</HTML>

Result is shown in Fig. 4 below. Note that we can change the width and height of the

resulting picture, that is, `search.gif'.

Fig. 4

<HTML>

<BODY>

<A href=image2.gif onmouseover="picture.src='search.gif';picture.width=250;

picture.height=100"

onmouseout="picture.src='contents.gif';picture.width=170;

picture.height=50">

<IMG SRC=contents.gif

WIDTH=170

HEIGHT=50

BORDER=0

NAME=picture>

E-COMMERCE IT430

</A>

</BODY>

</HTML>

Result is shown in Fig. 5 below. Note that using <A> we can make the resulting image

`search.gif' clikable such that when a user clicks at it he opens a different image `image2.gif,

shown

below.

Fig. 5

Objects

In computer language an object consists of certain properties and functions, exclusive to the object. In all

object oriented languages we can create objects of our own. In Java Script we are provided with certain

already defined objects which are ready to use.

Table of Contents: