It8501 - Web Technology Lecture Notes - UNIT-II

IT8501 - WEB TECHNOLOGY Lecture Notes - UNIT-II
UNIT - II
Style Sheets: CSS Introduction to Cascading Style Sheets-Features-Core Syntax-Style Sheets and
HTML Style Rule Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout-
Beyond the Normal Flow-CSS3.0. Client-Side Programming: The JavaScript Language-History and
Versions Introduction JavaScript in Perspective-Syntax-Variables and Data Types-Statements-
Operators-Literals-Functions-Objects-Arrays-Built-inObjects-JavaScript Debuggers.
STYLE SHEETS :CSS

Introduction to Cascading Style Sheets (CSS)
What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS file
DHTML – DYNAMIC HYPER TEXT MARKUP LANGUAGE
DHTML is a new and emerging technology that has evolved to meet the increasing demand for eye-
catching and mind-catching web sites.
DHTML combines HTML with Cascading Style Sheets (CSS) and Scripting Languages. HTML
specifies a web page’s elements like table, frame, paragraph, bulleted list, etc. CSS can be used to
determine an element’s size, color, position and a number of other features.
Scripting Languages (JavaScript and VBScript) can be used to manipulate the web page’s elements
so that styles assigned to them can change in response to a user’s input.
The combined technology of HTML and CSS becomes DHTML.
Similarly the combined technology of HTML and Scripting Languages also becomes DHTML.
CSS Demo
An HTML document can be displayed with different styles:
CSS are powerful mechanism for adding styles (e.g. Fonts, Colors, and Spacing) to web documents.
They enforce standards and uniformity throughout a web site and provide numerous attributes to
create dynamic effects.
The advantage of a style sheet includes the ability to make global changes to all documents from a
single location. Style sheets are said to cascade when they combine to specify the appearance of a page.
The style assignment process is accomplished with the <STYLE>…</STYLE> tags.

Prepared By, Mr.K.Selvaraj, AP/IT
FEATURES
The latest version of Cascade Style Sheets, CSS 3, was developed to make Web design easier but it
became a hot topic for a while because not all browsers supported it. However, trends change quickly in
technology and all browser makers currently are implementing complete CSS 3 support. Making that
process easier for the browser manufacturers is CSS 3's modularized specification, which allows them to
provide support for modules incrementally without having to perform major refactoring of the browsers'
codebases. The modularization concept not only makes the process of approving individual CSS 3
modules easier and faster, but it also makes documenting the spec easier.
Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web. You should begin
making your Web pages compatible with these latest specifications. In this article, I explore 10 of the
exciting new features in CSS 3, which is going to change the way developers who used CSS2 build
websites.
1. CSS 3 Selectors
In addition to the selectors that were available in CSS2, CSS 3 introduces some new selectors. Using
these selectors you can choose DOM elements based on their attributes. So you don't need to specify
classes and IDs for every element. Instead, you can utilize the attribute field to style them.
The most useful attributes for selectors are:
 [attr^=val] –- matches a DOM element with the attribute attr and a value starting with val
 [attr$=val] –- matches a DOM element with the attribute attr and a value ending with the suffix
val
 [attr*=val] –- matches a DOM element with the attribute attr and a value containing the substring
val
 CSS
<div class="code"><style>
p[title^="car"] {color: red;}
img[src*="birth"] {border:3px solid green;}
</style></div>
HTML
<div class="code"><img src="happy_birthdays.jpg" />
<p title="container">I am displaying a container. And this attribute won't match me. </p>
<p title="carousel">This carousel will match</p></div>
Apparently, the new CSS 3 selectors make styling different elements on a webpage pretty easy.

2. CSS 3 Rounded Corners
Rounded corner elements can spruce up a website, but creating a rounded corner requires a designer to
write a lot of code. Adjusting the height, width and positioning of these elements is a never-ending chore
because any change in content can break them.
CSS 3 addresses this problem by introducing the border-radius property, which gives you the same
rounded-corner effect and you don't have to write all the code. Here are examples for displaying rounded
corners in different places of a website.
CSS
<div class="code"> .box{ border: 2px solid orange; border-

radius : 25px; width: 100px; padding: 10px; text-align:center; }</div>
HTML
<div class="code"><div class="box">Submit</div></div>
Output
With the introduction of rounded corners, CSS 3 eliminates the need for including external images or
using any sort of JavaScript code to position the images. All you need is the border-radius property.
3. CSS 3 Border Image
Another exciting feature in CSS 3 is the ability to swap out a border with an image. The property border-
image allows you to specify an image to display instead of a plain solid-colored border.
CSS
<div class="code">#col{border-image:url(border_image.png) 100 100 100 100 round round; border-

width: 10px;}</div>
HTML
<div class="code"><div id="col">my content</div></div>
4. CSS 3 Box Shadow
A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved using a
repeated image around the element. However, with the property box-shadow this can be achieved by
writing a single line of CSS code.

After previously removing this property from the CSS 3 Backgrounds and Borders Module, the W3C
added it back in the last working draft.
CSS
<div class="code">.shadow{ background-color: #EEEEEE; box-

shadow:3px 3px 3px 2px #797979; height: 50px; width: 100px; padding: 5px;}</div>
HTML
<div class="code"><div class="shadow"> my content </div></div>
Output
5. CSS 3 Text Shadow
The new text-shadow property allows you to add drop shadows to the text on a webpage. Prior to CSS 3,
this would be done by either using an image or duplicating a text element and then positioning it. A
similar property called box-shadow is also available in CSS 3.
CSS
<div class="code">p{ text-shadow: #aaa 2px 2px 2px; }</div>
HTML
<div class="code"><p>My text is more beautiful, than a normal webfont</p></div>
Output
6. CSS 3 Gradient
While the Gradient effect is a sleek Web design tool, it can be a drain on resources if not implemented
correctly using current CSS techniques. Some designers use a complete image and put in the background
for the gradient effect, which increases the page load time.
Here are examples of the linear gradient property in CSS 3. To date, it is supported only in Safari 4 and
Chrome (WebKit) and Firefox 3.6.
CSS

<div class="code">#gradient { background-image: -webkit-gradient(linear,left bottom,left top,color-

stop(0, #E6C674),color-stop(1, #F7ECCA)); background-image: -moz-linear-
gradient(center bottom , #E6C674 0pt, #F7ECCA 100%); height: 50px;}</div>
HTML
<div class="code"><p id="gradient">My text is more beautiful, than a normal webfont</p></div>
Output
7. CSS 3 RGBA: Color, Now with Opacity
The RGB property in CSS is used to set colors for different elements. CSS 3 introduces a modification
and added opacity manipulation to this property. RGB has been transformed to RGBA (Red Green Blue
Alpha channels), which simplifies how you control the opacity of elements.
CSS
<div class="code">p {background: rgba(217, 127, 185, .5); }</div>
The above CSS code will make the opacity of p tags 50%, as specified in the RGBA property.
8. CSS 3 Multicolumn Layout
Almost every webpage today is divided into columns or boxes, and adjusting these boxes so they display
correctly on different browsers takes a toll on Web designers. CSS 3 solves this problem with the
multicolumn layout property; all you have to do is specify the number of columns you need and they
will be created.
This property is currently supported by the Firefox and WebKit browsers.
CSS
<div class="code">#col{-moz-column-count:3;-webkit-column-count:3;} </div>
HTML
<div class="code"><div id="col"> text truncated, due to length</div></div>
view plain | print | copy to clipboard | ?

CORE SYNTAX:
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.

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
CSS declarations 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;
}
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later
date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;

font-family:arial;
}
The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
.center {text-align:center;}
p.center {text-align:center;}
STYLE SHEETS AND HTML STYLE RULE
To apply a style, CSS uses the HTML document tree to match an element, attribute, or value in an
HTML file. For an HTML page to properly use CSS, it should be well-formed and valid, and possess a
valid doctype. If these conditions are not met the CSS match may not yield the desired results.There are
two types of CSS statements: rule-sets and at-rules. A rule set, also known simply as a rule, is the more
common statement, and consists of a selector and a declaration block, sometimes simply called a block.
The selector can be an element, class, or ID, and may include combinators, pseudo-elements, or pseudo-
classes.
Statement Type 1: Rules Sets (Rules)
statement + statement block
X {declaration; declaration;}
X {property; value; property: value;}
div > p {font-size: 1em; color #333;}
Statement Type 2: At-Rules
at-keyword + identifier + declaration
@import "subs.css";
The declaration block consists of the braces and everything in between. Within the declaration block are
declarations, which consist of properties and values. Properties are separated from their values (also
known as styles) by colons, and declarations are delimited by semi-colons. (Properties are also known as
attributes, but that terminology is not used in this document lest we confuse CSS properties with HTML

attributes.) White space inside a declaration block is ignored, which facilitates formatting the code in
developer-friendly ways. For example, both of the following statements are valid and equivalent, though
the latter slightly increases document weight.
h1 {color: blue; margin-top: 1em;} h1 { color: blue; margin-top: 1em; }
Ensure, however, that there is no white space between a value and its unit of measurement (e.g. 1.2em,
not 1.2 em).As opposed to rule sets, at-rules statements consist of the at-keyword "@", an identifier, and
a declaration. This declaration is defined as all the content contained within a set of curly braces, or by
all content up until the next semicolon. Note the following two examples.
@media print { p {font-size: 10pt;} tt {font-family: monospace;} }

@import url(addonstyles.css);
Other examples of at-keywords are media, font-face, and page. At-rules will be treated separately below.
CASCADING, AND INHERITANCE
Specified, computed, and actual values

Once a user agent has parsed a document and constructed a document tree, it must assign, for every
element in the tree, a value to every property that applies to the target media type.
The final value of a property is the result of a three-step calculation: the value is determined through
specification (the "specified value"), then resolved into an absolute value if necessary (the "computed
value"), and finally transformed according to the limitations of the local environment (the "actual
value").
Inheritance
Some values are inherited by the children of an element in the document tree. Each property defines
whether it is inherited or not.
Suppose there is an H1 element with an emphasizing element (EM) inside:
<H1>The headline <EM>is</EM> important!</H1>
If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent
element, so if H1 has the color blue, the EM element will likewise be in blue.
To set a "default" style property for a document, authors may set the property on the root of the
document tree. In HTML, for example, the HTML or BODY elements can serve this function. Note that
this will work even if the author omits the BODY tag in the HTML source since the HTML parser will
infer the missing tag.
For example, since the 'color' property is inherited, all descendants of the BODY element
will inherit the color 'black':
BODY { color: black; }
Specified percentage values are not inherited; computed values are.
For example, given the following style sheet:
BODY { font-size: 10pt }

H1 { font-size: 120% }
and this document fragment:
<BODY>
<H1>A <EM>large</EM> heading</H1>
</BODY>
the 'font-size' property for the H1 element will have the computed value '12pt' (120% times 10pt, the
parent's value). Since the computed value of 'font-size' is inherited, the EM element will have the
computed value '12pt' as well. If the user agent does not have the 12pt font available, the actual value of
'font-size' for both H1 and EM might be, for example, '11pt'.
The 'inherit' value
Each property may also have a specified value of 'inherit', which means that, for a given element, the
property takes the same computed value as the property for the element's parent. The inherited value,
which is normally only used as a fallback value, can be strengthened by setting 'inherit' explicitly.
In the example below, the 'color' and 'background' properties are set on the BODY element. On all other
elements, the 'color' value will be inherited and the background will be transparent. If these rules are part
of the user's style sheet, black text on a white background will be enforced throughout the document.
BODY {
color: black !important;
background: white !important;
}
*{
color: inherit !important;
background: transparent;
}
The cascade
Style sheets may have three different origins: author, user, and user agent.
 Author. The author specifies style sheets for a source document according to the conventions of
the document language. For instance, in HTML, style sheets may be included in the document or linked
externally.
 User: The user may be able to specify style information for a particular document. For example,
the user may specify a file that contains a style sheet or the user agent may provide an interface that
generates a user style sheet (or behave as if it did).
 User agent: Conforming user agents must apply a default style sheet (or behave as if they did)
prior to all other style sheets for a document. A user agent's default style sheet should present the
elements of the document language in ways that satisfy general presentation expectations for the
document language (e.g., for visual browsers, the EM element in HTML is presented using an italic
font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0
documents.
Note that the default style sheet may change if system settings are modified by the user (e.g., system
colors). However, due to limitations in a user agent's internal implementation, it may be impossible to
change the values in the default style sheet.

Style sheets from these three origins will overlap in scope, and they interact according to the cascade.
The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest
weight takes precedence.
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is
reversed, however, for "!important" rules. All rules user and author rules have more weight than rules in
the UA's default style sheet.
Imported style sheets also cascade and their weight depends on their import order. Rules specified in a
given style sheet override rules imported from other style sheets. Imported style sheets can themselves
import and override other style sheets, recursively, and the same precedence rules apply.
Important Rules
CSS attempts to create a balance of power between author and user style sheets. By default, rules in an
author's style sheet override those in a user's style sheet (see cascade rule 3).
However, for balance, an "!important" declaration (the keywords "!" and "important" follow the
declaration) takes precedence over a normal declaration. Both author and user style sheets may contain
"!important" declarations, and user "!important" rules override author "!important" rules. This CSS
feature improves accessibility of documents by giving users with special requirements (large fonts, color
combinations, etc.) control over presentation.
Note. This is a semantic change since CSS1. In CSS1, author "!important" rules took precedence over
user "!important" rules.
Declaring a shorthand property (e.g., 'background') to be "!important" is equivalent to declaring all of its
sub-properties to be "!important".
The first rule in the user's style sheet in the following example contains an "!important" declaration,
which overrides the corresponding declaration in the author's styles sheet. The second declaration will
also win due to being marked "!important". However, the third rule in the user's style sheet is not
"!important" and will therefore lose to the second rule in the author's style sheet (which happens to set
style on a shorthand property). Also, the third author rule will lose to the second author rule since the
second rule is "!important". This shows that "!important" declarations have a function also within author
style sheets.
/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }
/* From the author's style sheet */

P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
Calculating a selector's specificity
A selector's specificity is calculated as follows:

 count the number of ID attributes in the selector (= a)

 count the number of other attributes and pseudo-classes in the selector (= b)
 count the number of element names in the selector (= c)
 ignore pseudo-elements.
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
Some examples:
* {} /* a=0 b=0 c=0 -> specificity = 0 */
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, but
for the purpose of step 3 of the cascade algorithm, they are considered to have an ID selector
(specificity: a=1, b=0, c=0). For the purpose of step 4, they are considered to be after all other rules.
<HEAD>
<STYLE type="text/css">
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
In the above example, the color of the P element would be red. Although the specificity is the same for
both declarations, the declaration in the "style" attribute will override the one in the STYLE element
because of cascading rule 4.
Three Ways to Insert CSS

There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use
this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any
CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced
by the internal style sheet.
BOX MODEL - NORMAL FLOW- BOX LAYOUT - BEYOND THE NORMAL FLOW
All CSS Background Properties

Property Description Values CSS
background Sets all the background properties background-color 1

in one declaration background-image
background-repeat
background-attachment
background-position
inherit
background-attachment Sets whether a background image is Scroll,fixed,inherit 1

fixed or scrolls with the rest of the
page
background-color Sets the background color of an color-rgb 1

element color-hex
color-name
transparent
inherit
background-image Sets the background image for an url(URL),none,inherit 1

element
background-position Sets the starting position of a left top 1

background image left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

background-repeat Sets if/how a background image Repeat,repeat-x 1

will be repeated repeat-y,no-repeat,inherit
TEXT FORMATTING
This text is styled with some of the text formatting properties. The
heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and
the space between characters is specified.
Text Color
The color property is used to set the color of the text. The color can be specified by:
 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.
Eg:
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left
and right margins are straight (like in magazines and newspapers).
Eg:
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
Eg:
a {text-decoration:none;}
It can also be used to decorate text:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each
word.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
Example
p {text-indent:50px;}____
All CSS Font Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).
CSS LINKS:
Links can be styled in different ways.
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
Common Link Styles
In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
CSS Lists
The CSS list properties allow you to:

 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
All CSS List Properties
CSS2).
list-style Sets all the properties for a list in one declaration list-style-type list-style 1
position list-style-image
inherit
list-style-image Specifies an image as the list-item marker URL none inherit 1
list-style-position Specifies if the list-item markers should appear Inside outside inherit 1
inside or outside the content flow
list-style-type Specifies the type of list-item marker None,disc,circle,square

decimal,decimal-leading-zero
Armenian,Georgian,lower-
alpha,upper-alpha,lower-
greek,lower-latin,upper-latin
lower-roman,upper-roman
inherit
The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking
about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins,
borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other
elements.
The image below illustrates the box model:
Explanation of the different parts:

 Margin - Clears an area around the border. The margin does not have a background color, it is
completely transparent
 Border - A border that goes around the padding and content. The border is affected by the
background color of the box
 Padding - Clears an area around the content. The padding is affected by the background color of
the box
 Content - The content of the box, where text and images appear
In order to set the width and height of an element correctly in all browsers, you need to know how the
box model works.
Width and Height of an Element
Important: When you specify the width and height properties of an element with CSS, you are just
setting the width and height of the content area. To know the full size of the element, you must also add
the padding, border and margin.
The total width of the element in the example below is 300px:
Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)

+ 20px (left and right margin)

= 300px
Imagine that you only had 250px of space. Let's make an element with a total width of 250px:
The total width of an element should always be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin +
right margin
The total height of an element should always be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top
margin + bottom margin
Browsers Compatibility Issue
If you tested the previous example in Internet Explorer, you saw that the total width was not exactly
250px.
IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is
declared.
To fix this problem, just add a DOCTYPE to the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
CSS Border
The CSS border properties allow you to specify the style and color of an element's border.
All CSS Border Properties
CSS2).
border Sets all the border properties in one border-width 1

declaration border-style
border-color
border-bottom Sets all the bottom border properties in one border-bottom-width 1

declaration border-bottom-style
border-bottom-color
border-bottom-color Sets the color of the bottom border border-color 2
border-bottom-style Sets the style of the bottom border border-style 2
border-bottom-width Sets the width of the bottom border border-width 1
border-color Sets the color of the four borders color_name 1

hex_number
rgb_number
transparent
inherit
border-left Sets all the left border properties in one border-left-width 1

declaration border-left-style
border-left-color
border-left-color Sets the color of the left border border-color 2
border-left-style Sets the style of the left border border-style 2
border-left-width Sets the width of the left border border-width 1
border-right Sets all the right border properties in one border-right-width 1

declaration border-right-style
border-right-color
border-right-color Sets the color of the right border border-color 2
border-right-style Sets the style of the right border border-style 2
border-right-width Sets the width of the right border border-width 1
border-style Sets the style of the four borders none 1

hidden
dotted
dashed
solid
double
groove

ridge
inset
outset
inherit
border-top Sets all the top border properties in one border-top-width 1

declaration border-top-style
border-top-color
border-top-color Sets the color of the top border border-color 2
border-top-style Sets the style of the top border border-style 2
border-top-width Sets the width of the top border border-width 1
border-width Sets the width of the four borders thin

medium
thick
length
The CSS margin properties define the space around elements.
Margin
The margin clears an area around an element (outside the border). The margin does not have a
background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.
Possible Values
Value Description
auto The browser sets the margin.

The result of this is dependant of the browser
length Defines a fixed margin (in pixels, pt, em, etc.)
% Defines a margin in % of the containing element
All CSS Margin Properties

CSS2).

margin A shorthand property for setting the margin margin-top 1

properties in one declaration margin-right
margin-bottom
margin-left
margin-bottom Sets the bottom margin of an element auto 1

length
%
margin-left Sets the left margin of an element auto 1

length
%
margin-right Sets the right margin of an element auto 1

length
%
margin-top Sets the top margin of an element auto 1

length
%
CSS Padding
The CSS padding properties define the space between the element border and the element content.
Padding
The padding clears an area around the content (inside the border) of an element. The padding is affected
by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A
shorthand padding property can also be used, to change all paddings at once.
Possible Values
Value Description
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element
All CSS Padding Properties

CSS2).

padding A shorthand property for setting all the padding padding-top 1

properties in one declaration padding-right
padding-bottom
padding-left
padding-bottom Sets the bottom padding of an element length 1

%
padding-left Sets the left padding of an element length 1

%
padding-right Sets the right padding of an element length 1

%
padding-top Sets the top padding of an element length 1

%
CSS3.0:
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a
document written in a markup language. CSS3 is a latest standard of CSS earlier versions(CSS2).
CSS3 has Supported additional color properties as follows −
 RGBA colors
 HSL colors
 HSLA colors
 Opacity
RGBA stands for Red Green Blue Alpha. It is an extension of CSS2, Alpha specifies the opacity of a
color and parameter number is a numerical between 0.0 to 1.0. A Sample syntax of RGBA as shown
below −
#d1 {background-color: rgba(255, 0, 0, 0.5);}
HSL stands for hue, saturation, lightness.Here Huge is a degree on the color wheel, saturation and
lightness are percentage values between 0 to 100%. A Sample syntax of HSL as shown below −
#g1 {background-color: hsl(120, 100%, 50%);}

HSLA stands for hue, saturation, lightness and alpha. Alpha value specifies the opacity as shown
RGBA. A Sample syntax of HSLA as shown below −
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
opacity is a thinner paints need black added to increase opacity. A sample syntax of opacity is as
shown below −
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
The following example shows rgba color property.
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>
CLIENT-SIDE PROGRAMMING: THE JAVASCRIPT LANGUAGE
SCRIPTING LANGUAGES
 JavaScript is a Scripting language (web site development environment) created by Netscape.

 Hence JavaScript works best with the Netscape suite of Client and Server products.
 JavaScript is the native scripting language of Netscape Navigator.
 VBScript is the native Scripting language of HTML.
SERVER SIDE SCRIPTING
In Server side scripting the script program is executed at Server Side the required html program is sent
to the client.
The job of the server is more in server side scripting
CLIENT SIDE SCRIPTING
Here the script program is processed and executed in the client side itself.
So that it reduces the burden of the server.
JAVA SCRIPT
1. JavaScript is an object-oriented language that allows creation of interactive Web pages
2. JavaScript allows user entries, which are loaded into an HTML form to be processed as required
JAVASCRIPT INTRODUCTION
Objectives
1. To be able to write simple java script programs
2. To be able to use input and output statements
3. To understand basic memory concepts
4. To be able to use arithmetic operators
5. To understand the precedence of arithmetic operators
6. To be able to write decision making statements
7. To be able to use relational and equality operators
ADVANTAGES
1. It is an interpreted language, which requires no compilation steps.
2. Embedded within HTML.
3. Minimal Syntax – easy to learn
4. Quick Development
5. Designed for simple, small programs
6. High performance
7. Procedural Capabilities – support facilities such as condition checking, looping and branching.
8. Designed for programming user events – like VB Java Script is also based on Events.
9. Easy Debugging and Testing
10. Platform Independent/ Architecture Neutral
JavaScript History and Versions
This section provides a quick description of JavaScript language specification standards, ECMAScript,
JavaScript, LiveScript, and JScript. and history of versions.
JavaScript has one specification and several dialects:
 ECMAScript - The official name of the JavaScript language specification, the ECMA-262
specification.
 JavaScript - The originating dialect of the ECMAScript language specification. JavaScript was
implemented in Netscape.
 LiveScript - The predecessor of JavaScript. LiveScript was renamed to JavaScript in Netscape
3.0.
 JScript - The Microsoft dialect of the ECMAScript language specification. JScript was first
implemented in Internet Explorer 3.0 browser released in August 1996.
 JScript .NET - The successor of JScript under Microsoft's .NET framework.
Here is a quick summary of JavaScript history and versions of its dialects:
1994 Netscape 1.0
199? Netscape 2.0/JavaScript 1.0 ECMA-262 Edition 1, 1997
1996 IE 3.0/JScript 1.0 ECMA-262 Edition 1, 1997
2000 Netscape 6.0/JavaScript 1.5 ECMA-262 Edition 3, 1999
2002 Netscape 7.0/JavaScript 1.5 ECMA-262 Edition 3, 1999
2004 FireFox 1.0 ECMA-262 Edition 3, 1999
2006 IE 7.0/JScript ? ECMA-262 Edition 3, 1999
2006 FireFox 2.0/JavaScript 1.7 ECMA-262 Edition 3, 1999
2007 Netscape 8.0/JavaScript ? ECMA-262 Edition ?
2008 IE 8.0/JScript ? ECMA-262 Edition ?
200? FireFox 3.0/JavaScript 1.8 ECMA-262 Edition ?
The latest version of JavaScript specification is ECMA-262 Edition 3. So we should use it as the main
reference to learn JavaScript.

What is JavaScript?
JavaScript is a scripting language mainly used for writing dynamic Web pages. When a script
written in JavaScript is embedded in a Web page, it will be executed by the Web browser on the client
machine.
As a programming language, JavaScript has the following unique features:
 JavaScript is a scripting language - Source code is interpreted, instead of compiled and executed.
Like most other interpreted languages, it does support the eval(source_code) function.
 JavaScript is a dynamic typing language - Data types are associated with values, instead of
variables. In other words, variables are declared without specific data types. They can be assigned with
values of any data type.
 JavaScript is a prototype-based language - Prototypes, instead of classes, are used for defining
object properties, methods, and inheritance.
 JavaScript uses associative arrays to represent objects - Property names and values are stored as
associative array elements. Properties and their values can be added, changed, or deleted at run-time.
 JavaScript supports functions as first-class functions - Functions are really objects. Like regular
objects, functions can be created during execution, stored in data structure, and passed to other functions
as arguments.
As of 2008, the latest version of the JavaScript is 1.8.
Data Types, Variables and Expressions

JavaScript supports 5 primitive data types:
 Numbers - Any types of numeric values including integers and floating point values. Examples
of numbers are: 2008, 3.14, 1.51e10, etc.
 Strings - Sequences of Unicode characters. Examples of strings are: "Hello World!", "2008",
"\u4E16\u754C\u4F60\u597D\uFF01", etc.
 Booleans - Two values only: true and false.
 Null - One value only: null.
 Undefined - One value only: undefined.
JavaScript is a dynamic typing language. Data types are associated with values, instead of variables. In
other words, variables are declared without specific data types. They can be assigned with values of any
data type.
A variable is a container which has a name. We use variables to hold information that may change from
one moment to the next while a program is running.
For example, a shopping website might use a variable called total to hold the total cost of the goods the
customer has selected. The amount stored in this variable may change as the customer adds more goods

or discards earlier choices, but the name total stays the same. Therefore we can find out the current total
cost at any time by asking the program to tell us what is currently stored in total.
Literals
A literal, by contrast, doesn't have a name - it only has a value.
For example, we might use a literal to store the VAT rate, since this doesn't change very often. The
literal would have a value of (e.g.) 0.21. We could then obtain the final cost to the customer in the
following way:
VAT is equal to total x 0.21
final total is equal to total + VAT
JavaScript accepts the following types of variables:
Numeric Any numeric value, whether a whole number (an integer) or a number
that includes a fractional part (a real), e.g.,
12
3.14159
etc.
String A group of text characters, e.g.,
Ian
Macintosh G4
etc.
Boolean A value which can only be either True or False, e.g.
completed
married
etc.
We create variables and assign values to them in the following way:

var christianName = "Fred" (string)
var surname = "Jones" (string)
var age = 37 (numeric)
var married = false (Boolean)
In JavaScript source code, values of different data types can be provided as value literals as described in
sections below.
Numeric Value Literals

This section provides descriptions on numeric value literals and a tutorial example on how to use them
in JavaScript source code.
To provide values of numbers in JavaScript source code, you need to use numeric value literals in 3
formats:
1. Integer Literal - A sequence of digits following an optional sign character to represent an integer
value between -9007199254740992 (-2**53) and 9007199254740992 (2**53) inclusive. For example:
2008, -12, etc.
2. Hexadecimal Literal - A sequence of hexadecimal digits following 0x or 0X representing a positive

integer or floating point value. A hexadecimal literal may also have a sign character. For example:
0x07D8 (2008), -0x0C (-12), 0xffffffffffffffffffff (1.2089258196146292e+24), etc.
3. Floating Point Literal - The scientific notation of a real number with the following syntax:
(sign)(digits).(digits)e(sign)(digits). For example: 4.13, 0.333333, -1.51e10, 4.10e-29, etc.
String Literials
This section provides descriptions on string literals and a tutorial example on how to use them in
JavaScript source code.
To provide values of strings in JavaScript source code, you need to use string value literals following
these rules:
1. String literals are sequences of Unicode characters.
2. String literals must be enclosed in single quotes ('...') or double quotes ("...").
3. Several characters must be preceded with the escaping character, backslash (\): \b, \f, \n, \r, \t, \v, \', \",
and \\.
4. Latin-1 characters can be presented as hexadecimal escape sequences. For example, \xA9 represents
the copyright symbol.
5. Unicode characters can be presented as Unicode escape sequences. For example, \u4E16 represents a
Chinese character.
Declaring Variables - "var" Statements
This section provides descriptions on variables and a tutorial example on how to declare variables with
'var' statements.
What are variables? Variables are symbolic names that refer to values stored in the memory.
Variable names must be sequences of alphanumeric characters and underscore (_). But the first character
can not be a numeric character. (_5star) is a valid variable name. But (5star) is not an invalid variable
name.

Variable can be used without declaration. But it is strongly recommended that all variables are declared
with "var" statements in the following syntax formats:
var var_name_1;
var var_name_1 = value_1;
var var_name_1, var_name_2, var_name_3, ...;
var var_name_1 = value_1, var_name_1 = value_1, ...;
If a variable is declared without initial value, it contains the "undefined" value.
Operators and Expressions
This section provides descriptions on operators and expressions, including arithmetic, comparison,
logical, bitwise, and assignment operators.
Operators are the most important parts of expressions. JavaScripts many basic operators divided into
several groups:
1. Arithmetic Operator - Taking numeric values and returning a single numeric value. Arithmetic
operators include addition (+), subtraction (-), multiplication (*), and division (/), modulus (%),
increment (++), decrement (--), and unary negation (-).
2. Comparison Operator - Taking values of any types and returning a single boolean value.
Comparison operators include equal (==), not equal (!=), strict equal (===), strict not equal (!==),
greater than (>), greater than or equal (>=), less than (<), and less than or equal (<=).
3. Logical Operator - Taking boolean values and returning a single boolean value. Logical operators
include logical AND (&&), logical OR (||), and logical NOT (!).
4. Bitwise Operator - Taking bit strings of 32 bits and returning a single numeric value. Bitwise
operators include bitwise AND (&), bitwise OR (|), bitwise XOR (^), bitwise NOT (~), left shift (<<),
sign-propagating right shift (>>), and zero-fill right shift (>>>).
5. Assignment Operator - Taking a value of any type and returning a single value. An assignment
operator assigns a value to its left operand based on the value of its right operand. Assignment operators
include simple assignment (=), assignments combined with arithmetic operators (+=, -=, *=, /=, %=),
and assignments combined with bitwise operators (&=, ^=, |=, <<=, >>=, >>>=).
Operators
Operators are a type of command. They perform operations on variables and/or literals and produce a
result.
JavaScript understands the following operators:
+ Addition

- Subtraction
* Multiplication
/ Division
% Modulus
STATEMENTS
What is a statement? A statement is a basic execution unit in JavaScript. Several notes about
JavaScript statements:
A statement must end with semicolon (;).

Line breaks do not end statements. In other words, a single statement can be written in multiple
lines, and multiple statements can be written in a single line.
 A statement may be consist of a very simple expression, like a single literal; or a complex
expression with assignment and or comma operators.
 Most statements have statement key words, like "var", "if", "while", "break", etc.
 Multiple statements may be grouped together to form a statement block in the format of {s1; s2;
...; }.
 Comments enclosed in "/* ... */" or "// ... (end of line)" can be inserted anywhere inside a
statement.
Conditional "if" Statements
This section provides quick descriptions of different flavors of conditional 'if' statements.
"if" statements are called conditional statements. An "if" statement allows you to create one or more
statement blocks. The execution flow will be controlled to go through one of those blocks or no block at
all, based on conditions specified in the statement.
JavaScript supports 4 flavors of "if" statements:
1. Single-statement "if":
if (condition) statement;
where "condition" is a Boolean value, and "statement" is a regular statement. The specified statement
will be executed, if and only if the specified condition is "true".
2. Multi-statement "if":
if (condition) {
statement_1;
statement_2;

...
The specified multiple statements, a statement block, will be executed, if and only if the specified
condition is "true".
3. "if ... else" Statement:
if (condition)
statement or statement block
else
Two statements or statement blocks are specified. But only one of them will be executed based on the
value of the specified condition. If the specified condition is "true", the first statement or statement block
will be executed. If the specified condition is "false", the second statement or statement block will be
executed.
4. "if ... else if" Statement:
if (condition_1)
else if (condition_2)
...
...
else
Many statements or statement blocks are specified. But only one of them will be executed based on the
value of the condition specified for that block.
switch ... case" Statements
This section provides a quick description of the 'switch ... case' statement.
"switch case" statements are alternative ways of executing statements selectively based on certain
conditions. A "switch case" statement has the following generic syntax format:

switch (test_expression) {
case expected_value_1:
statement_11;
statement_12;
...
[break;]
case expected_value_2:
statement_21;
statement_22;
...
[break;]
...
...
default:
statement_x1;
statement_x2;
...
[break;]
where "test_expression" is used to generate a test value that will be tested against with expected values
specified in "case" clauses. The execution of a "switch case" statement goes like this:
 "case" clauses are possible execution starting points. Each "case" clause will be visited
sequentially from top to bottom.
 If the expected value of a "case" clause equals to the test value resulted form the switch
expression, the execution starts from those statements listed in this "case" clause.
 Once the execution started, it will continue until a break statement is reached or the end of the
"switch" block is reached.
 The "default" clause is optional. But if it is provided, it will become the execution starting point
when all case tests before the "default" clause are failed.

 Unlike many other programming languages, JavaScript supports both numeric expression and
string expression as the switch test expression.
A tutorial example will be given in the next section showing examples of "switch ... case" statements.
"for" Loop Statements
This section provides a quick description of the 'for' loop statement.
The "for" statement is a very common loop statement in many programming languages. The JavaScript
"for" statement has the following generic syntax format:
for ([initial_exp]; [loop_condition]; [increment_exp])
statement or statement_block
If you want to know exactly how a "for" statement will be executed, here is my understanding:
Step 1: "intial_exp", usually an assignment expression, is evaluated.
Step 2: "loop_condition", a Boolean expression, is evaluated.
Step 3: If "loop_condition" is evaluated to "true", continue with Step 5.
Step 4: If "loop_condition" is evaluated to "false", terminate the loop.
Step 5: Execute "statement" or "statement_block".
Step 6: "increment_exp", usually an assignment expression, is evaluated.
Step 7: Continue with Step 2.
"for" loop statement could be executed infinitely, if the "loop_condition" is always evaluated to "true".
A "break" statement could be used inside the loop statement block to terminate the loop early.
A "continue" statement could be used inside the loop statement block to skip the rest of the block and
start the next iteration of the loop.
while" Loop Statements
This section provides a quick description of the 'while' loop statement.
The "while" statement is a very common loop statement in many programming languages. The
JavaScript "while" statement has the following generic syntax format:
while (loop_condition)
A "while" statement is executed as follows:

Step 1: "loop_condition" expression is evaluated as a Boolean value.
Step 2: If "loop_condition" is evaluated to "true", continue with Step 4.
Step 3: If "loop_condition" is evaluated to "false", terminate the loop.
Step 4: Execute "statement" or "statement_block".
Step 5: Continue with Step 1.
There is another form of "while" loop, called "do ... while" loop statement, with the following syntax
format:
do
while (loop_condition);
"while" loop statement could be executed infinitely, if the "loop_condition" is always evaluated to
"true".
A "break" statement could be used inside the loop statement block to terminate the loop early.
A "continue" statement could be used inside the loop statement block to skip the rest of the block and
start the next iteration of the loop.
What Is an Array?
This section provides a quick description of what is an array in JavaScript and a tutorial example
showing JavaScript array features.
Like many programming languages, JavaScript support arrays allowing you to store and retrieve a list of
elements.
But like some other languages, JavaScript does not have an explicit array data type. Instead, it provides
you an Array object type to let you create arrays as objects. Here are the main features of an array in
JavaScript:
 An array is not a primitive data type.

 An array is an object.
 Array elements are indexed. Elements can be stored and retrieved by indexes.
 Array's index starts from 0. In other words, index 0 represents the first element.
 The size of an array is not statically defined. It can be dynamically expanded or truncated.
 Array's elements do not have to be the same data type.
 Several methods are provided on array objects allowing you to manipulate arrays directly.
Creating an Array Object

This section provides a tutorial example on how to create array objects in JavaScript.
There are 3 ways to create a new array object:
1. Using the array literal - A new array object can be created by using the array literal syntax of [exp1,
exp2, ...]. For example:
var colors = ["Red", "Green", "Blue"];
var account = ["Saving", 999.99, true];
2. Calling the array constructor - A new array object can be created by calling the array constructor of
(new Array(exp1, exp, ...)). For example:
var colors = new Array("Red", "Green", "Blue");
var account = new Array("Saving", 999.99, true);
3. Calling the array function - A new array object can be created by calling the array function of
(array(exp1, exp, ...)). For example:
var colors = Array("Red", "Green", "Blue");
var account = Array("Saving", 999.99, true);
Accessing Array Elements with Indexes
This section provides a tutorial example on how to access array elements with element indexes.
Array elements can be access with array indexes with several simple rules:
 Like many other programming languages, an array element can be accessed with the array
element syntax of array_name[index].
 An array index starts with 0.
 The length of an array is defined as the highest index of all elements plus 1.
 There is no index-out-of-bound exception in JavaScript.
 If an index greater than the array length is specified when retrieving an array element, the
"undefined" value will be returned.
 If an index greater than the array length is specified when storing an array element, the array will
be expanded to store the element at the specified index.
Truncating and Iterating Array Elements
This section provides a tutorial example on how to use the array length to truncate and iterate over array
elements.
As an object, an array has a special property called "length". You can use the object dot (.) operator to
retrieve the length value: "array_name.length".

The array length property can be used to truncate an array by setting the "length" property to a lower
value.
The array length property is also useful when you want to iterate all elements of an array.
For example, iterating all elements of an array with a "for" loop can be done as:
for (var i = 0; i < array_name.length; i++) {
... array_name[i];
Array Object Instance Methods
As an object, an array has several commonly used object instance methods:
 this_array.concat(second_array) - The concat() method returns a new array by concatenating the

specified second array to the end of this array.
 this_array.join(delimiter) - The join() method returns a string by joining all elements in this array
with the specified delimiter.
 this_array.pop() - The pop() method returns the last element of this array and removes it from
this array reducing the array length by 1.
 this_array.push(exp1, exp2, ...) - The push() method adds specified expressions as array elements
to the end of this array and returns the last element added.
 this_array.reverse() - The reverse() mothod reverses positions of all elements in this array.
 this_array.shift() - The shift() method returns the first element of this array, and removes it from
this array reducing the array length by 1.
 this_array.unshift(exp1, exp2, ...) - The unshift() method adds specified expressions as array
elements to the front of this array and returns the new length of the array.
 this_array.slice(start_index, upto_index) - The slice() method returns a section of this array
between the specified indexes.
Defining Your Own Functions
Like many programming languages, JavaScript allows you to define your own functions. JavaScript uses
the following syntax format to define a new function:
function function_name(parameter_1, parameter_2, ...) {
statement_1;
statement_2;
...
return return_expression

There are 4 areas you need to know in order to define a new function:
 Function Name - You should name your function so that you can call it later. "function_name" in
the above syntax format.
 Parameter List - You should name parameters of the function if you want to refer to them by
names. "parameter_1", "parameter_2", ... in the above syntax format.
 Function Body - The list of statements provided inside curly braces {} forms the function body.
"statement_1", "statement_2", ... in the above syntax format.
 Return Value - You should use "return" statements in the function body to end the execution of
the function and to return a return value to the calling statement.
"return" Statement and Return Value
This section provides a quick description on 'return' statements and return values. A tutorial example on
how return values are passed back to calling expressions is provided.
JavaScript supports "return" statements to allow functions to return values back to calling expressions.
Here are some basic rules on the return value from a function.
 If no return statement is used in a function, the calling expression will receive a special value:
"undefined".
 If the return value is a primitive value, the calling expression will receive a copy of the return
value.
 If the return value is an object reference, the calling expression will receive a copy of the object
reference.
Functions in JavaScript
In JavaScript, as in other languages, we can create functions. A function is a kind of mini-program that
forms part of a larger program.
Functions:
 consist of one or more statements (i.e., lines of program code that perform some operation)
 are separated in some way from the rest of the program, for example, by being enclosed in curly
brackets, {.....}
 are given a unique name, so that they can be called from elsewhere in the program.
In JavaScript, functions are created in the following way:

function name()

statement;
statement;
statement
Note that all the statements except the last statement must be followed by semi-colons. The last
statement doesn't need one, but if you do put a semi-colon after the last statement it won't cause any
problems.
Here is an example of a simple function:
function initialiseVariables()
itemsSold = 0;
nettPrice = 0;
priceAfterTax = 0
When called, this function will set the three variables itemsSold, nettPrice and priceAfterTax to zero.
To run this function from somewhere else in a program, we would simply call it by name, e.g.:
initialiseVariables();
Note that the name must be followed by a pair of brackets. The purpose of these will become clear later.
Functions can be called from within other functions.

For example:
function sayGoodbye()
alert("Goodbye!")
function sayHello()
alert("Hi, there!");

sayGoodbye()
Passing Parameters to Functions

Some functions perform a simple task for which no extra information is needed.
For example, if we want to create a function which adds VAT to a price, we would have to tell the
function what the price is.
To do this we would pass the price into the function as a parameter. Parameters are listed in between the
brackets that follow the function name. For example:
function name(parameter_1, parameter_2)
statement(s);
Here's an example of a simple function that accepts a single parameter:

function addVAT(price)
price *= 1.21;
alert(price)
This function accepts a parameter called price, multiplies it by 1.21 (i.e., adds an extra 21% to it), and
then displays the new value in an alert box.
We would call this function in the following way:
addVAT(nettPrice)
The parameter nettPrice could be either:
 a literal - for example:
addVAT(5)
 a variable - for example:

var nettPrice = 5;
addVAT(nettPrice)
Returning values from Functions

Sometimes we also need to get some information back from a function.

For example, we might want to add VAT to a price and then, instead of just displaying the result, pass it
back to the user or display it in a table.
To get information back from a function we do the following:
function addVAT(price)
price *= 1.21;
return price
To call this function we would do the following:

var newPrice = addVAT(nettPrice)
The value returned by the funtion will be stored in the variable newPrice. Therefore this funtion will
have the effect of making newPrice equal to nettPrice multiplied by 1.21.
DOM API - The "document" Object
This section provides a quick description of the 'document' object of the DOM API. A tutorial example
is provided on building a simple HTML document with the 'document' object.
A typical Web browser provides the DOM (Document Object Model) API (Application Programming
Interface) to allow JavaScript codes to interact with the browser and the HTML document.
The most commonly used object in the DOM API is the "document" object, which has the following
features:
 The "document" object is a browser built-in object that represents the current HTML document
in the browser.
 The "document" object represents all elements in the HTML document with tree structure of
"node" objects.
 The "document" object and its "node" objects offer various methods to allow you to manipulate
the HTML document.
 The "document" object share the same programming interface in JavaScript and other
programming languages.
DOM API - The "window" Object
This section provides a quick description of the 'window' object of the DOM API. A tutorial example is
provided on changing browser window size through the 'window' object.
The DOM API provided by the Web browser contains another useful object called "window", which has
the following features:

 The "window" object is a browser built-in object that represents the browser window that
contains the current HTML document.
 The "window" object offers a number of properties and methods to allow you
 The "document" object and its "node" objects offers various methods to allow you to manipulate
the window.
Event Listeners and Objects
This section provides a quick description of event trigger attributes on different HTML tags and the
'event' object representing the event with detail information about the event. A tutorial example is
provided to display mouse location by adding a listener to the mouse-pushed-down event.
A typical Web browser also supports special HTML attributes to let you add event listeners and passing
event objects. Here are few commonly used HTML attributes on various HTML tags:
 "<body onLoad="listener_code" ...>" - The specified listener code will be executed when the
"onLoad" event is triggered by the browser starting to load the HTML document.
 "<body onMouseDown="listener_code" ...>" - The specified listener code will be executed when
the "onMouseDown" event is triggered by the user pushing down the mouse button anywhere in the
browser window.
 "<a onMouseOver="listener_code" ...>" - The specified listener code will be executed when the
"onMouseOver" event is triggered by the user moving mouse over this hyper link.
 "<input type="button" onClick="listener_code" ...>" - The specified listener code will be
executed when the "onClick" event is triggered by the user clicking this button.
More event trigger attributes will be introduced in other chapters in this book.
In each event trigger attribute, the browser will provide an object called "event", which presents this
event and contains detailed information about this event. This "event" object has various properties and
methods for you to use.
Built-in Object Types

This section provides a list of all built-in object types defined in the ECMAScript specification.
The 3rd edition of the ECMAScript specification defines the following built-in object types:
 Object - The root object type in the object type tree. All other object types are inherited from the
Object object type.
 Global - A special object type used to create one and only one object to hold global built-in
properties and functions. Note that ECMAScript only supports one single object of the Global object
type. You are not allowed to the Global() constructor to create other Global objects.
 Function - An object type used to create functions. All functions are objects of the Function
object type.
 Array - An object type used to create arrays. All arrays are objects of the Array object type.

 String - An object type used to create string objects. String object type allows you to handle
string primitive values as objects.
 Boolean - An object type used to create Boolean objects. Boolean object type allows you to
handle Boolean primitive values as objects.
 Number - An object type used to create number objects. Boolean object type allows you to
handle number primitive values as objects.
 Date - An object type used to create date and time objects.
 RegExp - An object type used to create regular expression objects for text processing.
 Error - An object type used to create error objects used in exception handling processes.
 Math - A special object type used to create one and only one object to hold mathematics related
properties and functions.
See next sections for a quick introduction of each built-in object type defined in the ECMAScript
specification.
The "Object" Object Type - The Root Object Type
This section provides a quick description and a tutorial example script of the 'Object' built-in object type,
which is the root or base object type of all other object types.
The "Object" object type is probably the most important built-in object type. It has the following main
features:
 "Object" is the root (or base) object type in the object type tree. All other object types are
inherited from the Object object type.
 "Object" objects can be created with the Object() constructor function.
 "Object" objects can also be created with an object literal: {property: value, ...}.
The "Function" Object Type - Functions Are Objects
This section provides a quick description and a tutorial example script on the 'Function' built-in object
type, which is used to create functions.
The "Function" object type is a special built-in object type to be used to create new functions. It has the
following main features:
 New functions can be created with the "Function()" constructor.

 All "Function" objects have an inherited property called "length" representing the number of
arguments of the function.
 All "Function" objects have 3 inherited methods: apply(), call(), and toString().
 A "Function" object may have its own properties to share values across multiple calls.
 A "Function" object can also be created with a function literal: function name(param...)
{body...}.
 Of course, a "Function" object can be created in the traditional way - the function declaration
statement: function name(param...) {body...}.

function [function_name](parameter_1, parameter_2, ...) { statement_1; statement_2; ... return

return_expression };
The "Array" Object Type - Arrays Are Objects
This section provides a quick description and a tutorial example script on the 'Array' built-in object type,
which is used to create arrays.
The "Array" object type is a special built-in object type to be used to create new arrays. It has the
following main features:
 New arrays can be created with the "Array()" constructor.

 All "Array" objects have an inherited property called "length" representing the number of
elements of the array.
 All "Array" objects have many inherited methods: reverse(), sort(), indexOf(), push(), pop(),
shift(), etc..
 All elements in an array are actually properties with their indexes as property names.
 A "Array" object can also be created with an array literal: [elements...].
 A "Array" object can also be created with the Array function: Array(elements...).
The "String" Object Type - Not Equal to String Primitive Type
This section provides a quick description and a tutorial example script on the 'String' built-in object type,
which is used to create 'String' objects. Watch out: 'String' objects are not string values.
The "String" object type is a special built-in object type to be used to create a "String" object, which is
different than a string value of the string primitive type. It has the following main features:
 New "String" objects can be created with the "String()" constructor. Note that "String()" is also a
regular function, which returns a string value, not a "String" object.
 All "String" objects have an inherited property called "length" representing the number of
characters of the string.
 All "String objects have many inherited methods: toString(), charAt(), charCodeAt(), concat(),
indexOf(), etc.. Accessing those inherited methods is the main reason of using "String" objects instead
of string values.
 A string literal, "...", creates a string value, not a "String" object.
 A string value can be converted to a "String" object on the fly with the (.) operator, for example:
"string".length.
The "Date" Object Type - Managing Dates and Times
This section provides a quick description and a tutorial example script on the 'Date' built-in object type,
which is used to create 'Date' objects.
The "Date" object type is a built-in object type to be used to create a "Date" object, representing a
moment in time. It has the following main features:

 New "Date" objects can be created with the "Date()" constructor. Note that "Date()" is also a
regular function, which returns a string representation of a date.
 All "Date objects have several inherited methods: toString(), valueOf(), setDate(), getDate(), etc..
 The "Date" constructor offers its own methods: Date.parse(), Date.UTC(), etc..
The "Error" Object Type - Runtime Exceptions
This section provides a quick description and a tutorial example script on the 'Error' built-in object type,
which is used to create 'Error' objects for runtime exception handling.
The "Error" object type is a built-in object type to be used to create a "Error" object, representing a
runtime exception. It has the following main features:
 New "Error" objects can be created with the "Error()" constructor. "Error()" can also be used as a
regular function, which also returns an "Error" object.
 All "Error" objects have 2 inherited properties: name and message.
 All "Error" objects have the common inherited method: toString().
 The "Error" object type has many sub types: EvalError, RangeError, ReferenceError,
SyntaxError, TypeError, and URIError.
THE JAVASCRIPT ARRAYS
Arrays are JavaScript objects that are capable of storing a sequence of values. These values are stored in
indexed locations within the array. The length of an array is the number of elements of an array accessed
by using the name of the array followed by the index value of the array element enclosed in square
brackets.
The length of an array starts from 0 to n-1.
The array can be created in the following methods
1. arrayName = new Array(Array length) => array size is explicitly specified, array size is predefined.
2. arrayName = new Array() =>The second example creates an array of
the size 0.
ARRAY METHODS
Join() – returns all elements of the array joined together as a single string.
Reverse() – reverses the order of the elements in the array.
BUILT-IN FUNCTIONS IN JAVASCRIPT
1. eval() converts a string expression to a numeric value
USER DEFINED FUNCTIONS IN JAVASCRIPT

function function_name(parameter1,parameter2…)
block of java script
DIALOG BOXES
Dialog boxes are used to display small windows. This is also used to get input from user.
SYNTAX
alert(“message”);
alert(“Click here to continue”)
prompt(“Enter your name”, name)
1. alert is only used to display some information
2. prompt is used to display information along with some input value
3. Confirm dialog box, causes program execution to halt until user action takes place.
The user action can be either OK or CANCEL.
OK – returns true
CANCEL – returns false.
JAVASCRIPT KEYWORDS
break case continue delete do
else false for function if
in new null return switch
this true typeof var void
while with
JAVA SCRIPT – OBJECTS
Java script uses objects to perform many tasks and therefore is referred to as an object based
programming language.
There are different objects in Java script
1. MATH OBJECT
Method Description Example
Abs( x ) Absolute value of x abs ( 7.2 ) is 7.2, abs(-5.6) is 5.6
Ceil( x ) Rounds x to the smallest integer not less
than x
ceil( 9.2 ) is 10.0
Cos( x ) Trigonometric cosine of x (x in radians) cos ( 0.0 ) is 1.0
Exp( x ) Exponential method exp( 1.0 ) is 2.71828
floor( x ) Rounds x to the largest integer not greater than x
floor( 9.2 ) is 9.0
log (x) Natural logarithm of x (base e) log ( 2.7182 ) is 1.0
max( x, y ) Largest value of x and y Max(10,40)
Min( x, y ) Smaller value of x and y Min(10,40)
Pow( x, y ) X raised to power y Pow(2,3)
round ( x ) Rounds x to the closest integer Round(20.456)
sin ( x ) Trigonometric sine of x (x in radians) Sin(2)
Sqrt ( x ) Square root of x Sqrt(25)
tan ( x) Trigonometric tangent of (x in radians) Tan(1)
2. STRING OBJECT
String can be
var color = “blue” or var name = “peter”
Method Description
charAt( index ) Returns a string containing the character at the specified index
charCodeAt( index) Returns the Unicode value of the character at the specified index. If there is no
character at the index, returns NaN (Not a number)
concat ( string ) Concatenates its argument to the end of the string that invokes the method.
slice( start, end ) Returns a string containing the portion of the string from index start through index end.
If the end is not specified, the method returns a string from the

end of the string.
split ( string ) Splits the source string into an array of strings or tokens.
substr( start, end ) Returns a string containing the characters from index start up to but not including
index end in the source string.
toLowerCase(),
toUpperCase()
Converts uppercase into lowercase
Converts lowercase into uppercase.
Blink, strike, sub, sup Gives blinking, strike through, subscript and superscript respectively
tan ( x) Trigonometric tangent of (x in radians)
3. DATE OBJECT
UTC – Coordinated Universal Time
GMT – Greenwich Mean Time
Method Description
getdate()
getUTCDate()
Returns a number from 1 to 31 representing the day of the month in local time or UTC.
getDay()
getUTCDay()
Returns a number from 0 (Sunday) to 6 (Saturday) representing the day of the week in local time or
UTC
getFullYear()
getUTCFullYear()
Returns the year as a four digit number in ocal time of UTC.
getHours()
getUTCHours()
Returns a number from 0 to 23 representing hours since midnight in local time or UTC.

roUTCString() Returns a string representation of the date and time in the form 19 sep 2001
valueOf() The time in number of milliseconds since midnight, January 1, 1970
DOCUMENT OBJECT
Method Description
write( string ) Writes the string to the HTML document as XHTML code
writeln( string ) Writes the string to the HTML document to a new line
document.cookie This property is a string containing the values of all the cookies stored on the user’s
computer for the current
document.
Document.lastmodified This property is the date and time that this document was last modified.
WINDOW OBJECT
Method Description
open( url, name, options ) Creates a new window with the URL of the window set to url, the name set to
name, and the visible features set by the string passed in as option.
prompt( prompt, default ) Displays dialog box.
close() Closes the current window and deletes its object from memory
Blur() This method takes focus away from the window
window.document This property contains the document object representing the document currently
inside the window
window.closed Set to true/false if window is closed or not respectively
window.opener Open the current window, if such a window exists.
COOKIES
Cookies provide web developers with a tool for personalizing web pages.
A cookie is a piece of data that is stored on the user’s computer to maintain information about
the client during and between browser sessions.
OBJECT REFERENCING
The simplest way to reference an element is by using the element’s id attribute.

The element is represented as an object, and its various XHTML attributes become
properties that ca be manipulated by scripting.
DHTML OBJECT MODEL
 Window
 Frames
 History
 Navigator
 Location
 Document
 Event
 Document
 Plugins
 All
 Anchors
 Applets
 Body
 Embeds
 Filters
 Forms
 Images
 Object or
 Collection

Description
Window Represents the browsers window and provides access to the document
Document Provides access to DHTML
Body history Keeps track of the sites visited by the browser user.
Navigator Contains information about the web browser, such as the name of the browser, the
version etc.
Location Contains the URL of the rendered document.
Event Can be used in an event handler to obtain information about the event that occurred.
All Many objects have an all collection that provides access to every
element contained in the object. For example body element provides access to every element
in the form.
Anchors Collection contains all the anchor element that have a name or id attribute
Frames Contains window objects that represent each frame in the browser window. Each frame
is treated as its own sub window.
Scripts Contains all the script elements in the HTML window
StyleSheets Contains style sheet object that represent each style element in the XHTML
document and each style sheet included in the XHTML document via link.
OBJECTS
Java script communicates with web browser using object model. There are many
number of objects available in Java Script that can be used to control and interact with the
web browser.
OBJECT HIERARCHY
 Window Navigator
 Document History Location
 Anchor Link Images Form
 Button Checkbox Radio Text Area Submit Hidden Text Password Reset Select

SCOPE
Scope or life refers to the range over which a variable, function or an object. A variable in java
script will have value only with in the scope. It can not be referenced outside the function.
PROPERTIES OF WINDOW OBJECT
Properties Meaning
 Closed Returns true if the window is closed else returns Boolean value false.
 Length Returns the number of frames in the current window
 Name Returns the name of a window
 Opener Returns the name of the window from which it was created. The
 return value is String.
 Parent Refers a window that contains a frameset
METHODS OF WINDOW OBJECT
Methods Meaning
 onBlur() Triggers when focus is removed from the window

 onFocus() Triggers when focus is applied to the window
 onError() Triggers when error occurs in the window
 onLoad() Triggers when browser finishes loading a document into the window
 onUnload() Triggers when user exists from the document within the window
PROPERTIES OF WINDOW OBJECT
The properties of window objects are
1. href 2. protocol 3. host 4. hostname
5. port 6. path 7. hash 8. search.
METHODS OF HISTORY OBJECT
Methods Meaning
 Length() Returns the number of entries in the history entity

 Back() Helps the web browser to load the previous entry in history object.
 Forward() Helps the web browser to load the next entry in history object.
PROPERTIES OF HISTORY OBJECT
Properties Meaning

 Current Contains the URL of the current history entity

 Length Contains the number of entities in history list
 Previous Contains the URL of the previous history stack entity
 Next Contains the URL of the next history stack entity.
JAVASCRIPT DEBUGGERS
 1. The Dynamic HTML Object Model gives web authors great control over the
presentation of their pages by giving them access to all the elements on their web page.
The whole web page –elements, forms, frames, tables, etc – represented in an object
hierarchy.
 2. The simplest way to reference an element is by its id attributes. The element is

represented as an object, and its various XHTML attributes become properties that can be
manipulated by scripting.
 3. The innerText property of the object refers to the text contained in the element.
 4. Changing the text displayed on screen is a Dynamic HTML ability called dynamic
 content.
 5. Every element has its own all collection consisting of all the elements contained in the
element.

It8501 - Web Technology Lecture Notes - UNIT-II

Uploaded by

Copyright:

Available Formats

You might also like

It8501 - Web Technology Lecture Notes - UNIT-II

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

It8501 - Web Technology Lecture Notes - UNIT-II

Uploaded by

Copyright:

Available Formats

IT8501 - WEB TECHNOLOGY Lecture Notes - UNIT-II

STYLE SHEETS :CSS

DHTML – DYNAMIC HYPER TEXT MARKUP LANGUAGE

The combined technology of HTML and CSS becomes DHTML.

The style assignment process is accomplished with the <STYLE>…</STYLE> tags.

The most useful attributes for selectors are:

p[title^="car"] {color: red;}

img[src*="birth"] {border:3px solid green;}

<div class="code"><img src="happy_birthdays.jpg" />

<p title="carousel">This carousel will match</p></div>

Prepared By, Mr.K.Selvaraj, AP/IT

2. CSS 3 Rounded Corners

<div class="code"> .box{ border: 2px solid orange; border-

<div class="code"><div class="box">Submit</div></div>

3. CSS 3 Border Image

<div class="code">#col{border-image:url(border_image.png) 100 100 100 100 round round; border-

<div class="code"><div id="col">my content</div></div>

4. CSS 3 Box Shadow

Prepared By, Mr.K.Selvaraj, AP/IT

<div class="code">.shadow{ background-color: #EEEEEE; box-

<div class="code"><div class="shadow"> my content </div></div>

5. CSS 3 Text Shadow

<div class="code">p{ text-shadow: #aaa 2px 2px 2px; }</div>

<div class="code"><p>My text is more beautiful, than a normal webfont</p></div>

Prepared By, Mr.K.Selvaraj, AP/IT

<div class="code">#gradient { background-image: -webkit-gradient(linear,left bottom,left top,color-

<div class="code"><p id="gradient">My text is more beautiful, than a normal webfont</p></div>

7. CSS 3 RGBA: Color, Now with Opacity

<div class="code">p {background: rgba(217, 127, 185, .5); }</div>

8. CSS 3 Multicolumn Layout

This property is currently supported by the Firefox and WebKit browsers.

<div class="code">#col{-moz-column-count:3;-webkit-column-count:3;} </div>

<div class="code"><div id="col"> text truncated, due to length</div></div>

view plain | print | copy to clipboard | ?

Prepared By, Mr.K.Selvaraj, AP/IT

The selector is normally the HTML element you want to style.

Prepared By, Mr.K.Selvaraj, AP/IT

The class Selector

STYLE SHEETS AND HTML STYLE RULE

Statement Type 1: Rules Sets (Rules)

statement + statement block

X {property; value; property: value;}

div > p {font-size: 1em; color #333;}

Statement Type 2: At-Rules

at-keyword + identifier + declaration

Prepared By, Mr.K.Selvaraj, AP/IT

h1 {color: blue; margin-top: 1em;} h1 { color: blue; margin-top: 1em; }

@media print { p {font-size: 10pt;} tt {font-family: monospace;} }

CASCADING, AND INHERITANCE

Specified, computed, and actual values

Prepared By, Mr.K.Selvaraj, AP/IT

Prepared By, Mr.K.Selvaraj, AP/IT

/* From the author's style sheet */

Prepared By, Mr.K.Selvaraj, AP/IT

 count the number of ID attributes in the selector (= a)

Three Ways to Insert CSS

External Style Sheet