IT 2352-Unit 2

UNIT II
Style Sheets: CSS-Introduction to Cascading Style Sheets-Features-Core Syntax-Style

Sheets and HTML Style Rle Cascading and Inheritance-Text Properties-Box Model
Normal Flow Box Layout-Beyond the Normal Flow-Other Properties-Case Study.
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-in Objects-JavaScript Debuggers.
Style Sheets:
a style sheet is a file or form that defines the layout of a document. Style sheets are
useful because you can use the same style sheet for many documents. style sheets are also
called templates.
Cascading Style Sheets:
Introduction:
• Cascading Style Sheets, or CSS, are a series of instructions that specify how
markup elements should appear on a Web page.
• Cascading Style Sheets (CSS) is a style sheet language used to describe the
presentation semantics (the look and formatting) of a document written in a
markup language.
• CSS is designed primarily to enable the separation of document content (written in

HTML or a similar markup language) from document presentation, including
elements such as the layout, colors, and fonts.
Features of CSS:
• CSS allows “separation” between the information contained in a document and its
presentation.
• Changes in the presentation can be made without disturbing the information of the
document.
• Style sheet allows user to decide the style of presentation and it is defined in
separate file.
• Single style sheet used for all the pages of the web site and all the pages will have
consistent look and feel.
Syntax of CSS:
• A style sheet consists of a list of rules.

• Each rule or rule-set consists of one or more selectors and a declaration block.
• A declaration-block consists of a list of declarations in braces.
• Each declaration itself consists of a property, a colon (:), a value, then a semi-
colon (;).
• Collection of style rules called “rule set”.
• Each rule set consist of two parts , “selector string” followed by “declaration
block”.
<style type= “text/css”>

h1
Selector string
{
Font-family:arial;
Font-color:red; Declaration Block
}
</style> Valu
CSS Rules
A CSS rule defines the appearance attributes that HTML will acquire and so change the
display of the document content in the browser.
All style rules are composed of three parts:
1. Selectors: Selectors are string identifiers that defines to what HTML element the rule
is applied. A selector can be an HTML tag, a class selector or an ID selector.
2. Properties: Properties are predefined attributes that can be applied
3. Values: Values are the specific setting chosen for a property.
4. The combination of a property and the associated value is called a definition.

Rule Definition: properties and values
After the selector has been specified, the definition provides the properties and values to
be used with the selector.
CSS Types:
• CSS effects document changes as style rules. Style rules can be implemented in three
ways:
1. Inline:
defines style rules set within individual HTML tags using the style
attribute. Inline styles rules override any other influencing style rule. For example:
Syntax:
<H1 style="color: blue; font-style: italic"> I'm blue</H1>
2. Embedded:
defines style rules set within the HTML <HEAD> section of a document,
using the STYLE tag. Embedded styles rules can include variety of HTML
elements which will be applied to all the specified tags that are used within the
<BODY> of the document. For example:
Syntax:
<STYLE type="text/css">H1 H2 H3 {color: green; text-transform:

uppercase;}</STYLE>
3. External:
defines the use of a separate text file containing the style rules. External
style files have a css file extension name. External style sheets are implemented
with the use of the <LINK> tag, and provide formatting standards that can be
applied as a template to any number of documents at a Web site. The style is
called from within the HTML document using the <LINK> tag:
syntax:
<LINK href="somefile.css" rel="stylesheet" type="text/css">

Advantage:
To allow for user preference and promote cost-time savings in web
management, the desired styles should be defined externally in a separate file
rather than "hard-code" formatted in the webpage.
Another benefit of having external styles is that all webpages can reference
one file and use the same styles; thus, subsequent changes can be made in one
place and will take place in all webpages (vs. editing one page at a time).
Example:
<html>
<head>
<title>Document Title</title>
<link href="my_style_sheet.css" rel="stylesheet" type="text/css">
</head>
</html>
Selectors
• Selectors are a way to match styles to elements in the document tree.
1. Simple Selector
• The simple selector is used for applying style to a single element to which
the property and value is applied to it.
• Example:
H1
{
Font-family:arial;
Font-size:20pt;
Font-color:red;
}
</style>
2. Universal Selector
• Universal selector is used to apply the property and value to all the
elements in the document which represent the universal selector symbol.
• Example:
*{
Font-family:arial;
Font-size:20pt;
Font-color:red;
}
</style>
3. Class selector
• Class selector is used to apply different style to the same element.

• These difference style appear on different occurrence of that element.
• Example:
H1.redText
{
Font-family:arial;
Font-size:20pt;
Font-color:red;
}
</style>
H1.blueText
{
Font-family:arial;
Font-size:20pt;
Font-color:blue;
}
</style>
4. Generic selector
• Generic selector is used to define the class in generalized form.

• Particular class information applied to any tag.
• Example:
.blueText
{
Font-family:arial;
Font-size:20pt;
Font-color:blue;
}
</style>
<h1 class=”red text”>
5. ID selector
• ID selector is used to define the class in generalized form.
• ID selector style applied to one specific element.
• Example:
#top
{
Font-family:arial;
Font-size:20pt;
Font-color:blue;
}
</style>
<div id=”top”>
Important Notes:
• The <BR>, <FRAMESET> and <FRAME> tags cannot be used as selectors.
• The <P> tag must include a close tag, </P>, when used with CSS.
CSS: Text properties
• color
• letter-spacing
• text-align
• text-decoration
• text-indent
• text-transform
CSS: Background properties
• background-color
• background-image
• background-repeat
• background-position
• background-attachment
CSS: Font properties
• font-family
• font-size
• font-style
• font-variant
• font-weight
The Basis of CSS layout:
Box Model:
• Every block element in CSS is effectively inside a box, and can have margins,
padding and borders applied to it.
• Box widths can be specified in absolute values (e.g. px) or in relative values,
usually:
em - width values relative to the size of the font in ems
percentage - width values relative the containing box’s content region
• The root (or top-most) element’s containing box is effectively the browser
window.
Every CSS box is divided into regions, consisting of:

1. Content
2. Padding
3. Border
4. Margins
Border properties
i. border-style
ii. border-color
iii. border-width
• Borders can be applied to any block element
• Borders always come outside the padding area, but inside the margin area.
• Border properties cannot have negative values
• If a border is not specified, the default is no-border (i.e. no border appears and no
space between any margin and padding is allocated for a border)
• Border properties can be defined independently on top, right, bottom and left, or
all-at-once using CSS shorthand
CSS: Margin properties
i. margin-bottom
ii. margin-left
iii. margin-right
iv. margin-top
• Margins define the space around elements outside the border

• Margin properties can have negative values in order to deliberately overlap content
• Margin properties will affect the position of background elements (graphics and/or
colours) in relation to the edges of the containing block element
• Margin properties can be defined independently on top, right, bottom and left, or
CSS: Padding properties
i. padding-bottom
ii. padding-left
iii. padding-right
iv. padding-top
• Padding defines the space around elements inside the border; i.e between the
border and the content itself
• Padding properties cannot have negative values
• Padding properties do not affect the position of background elements (graphics
and/or colours) in the containing block element; only the position of content.
• Padding properties can be defined independently on top, right, bottom and left, or
CSS: List properties

• list-style-type (unordered)
• list-style-type (ordered)
• list-style-image
• list-style-position
CSS: Normal Flow Model
Floating
• float property allows element boxes to be shifted to the right or left on the current
line
– Floated boxes are block boxes
– Floated boxes are “pulled out” of the normal flow and repositioned
– Must have explicit width
– May overlap other boxes
• clear property specifies which side(s) of an element should NOT be adjacent to a
floating box that is specified earlier in the document
• Setting the float property to left or right causes a box to be taken out of its position
in the normal flow and moved as far left or right as possible.
Positioning
• position property:
– static – box is positioned according to normal flow
– relative – box is positioned relative to where it would have been placed in
the normal flow
– absolute – box is positioned relative to its containing block; these boxes are
taken out of flow
– fixed – box is fixed in relation to the viewport (a browser window or a
printed page)
Other CSS layout properties
• Color and background image

• Cursor style
• Border style, width, and color
• Height and width of element, plus overflow
Introducing JavaScript
• JavaScript is a scripting language developed by Netscape that is used to modify

web pages. Most JavaScript must be written in the HTML document between
<SCRIPT> tags.
• You open with a <SCRIPT> tag, write your JavaScript, and write a closing
</SCRIPT> tag. Sometimes, as an attribute to script, you may add
“Language=JavaScript” because there are other scripting languages as well as
JavaScript that can be used in HTML.
• JavaScript is object-oriented.
• An Object in JavaScript is a resource that has specific characteristics known as
properties and provides several services known as methods and events.
• A variable stores a value. It can be thought of as a labeled box, with the name of
the variable as the label and the value as the contents. The JavaScript statement:
var x= “hello”;
• A method is basically a collection of statements that does something. For example,
a method “writeln()” exists in the document object that can be used to write html
to your document.
• Methods are predefined in JavaScript
Java Script Versions

JavaScript Properties
• Note that JavaScript code did not need to be compiled

– JavaScript is an interpreted language
– Portion of browser software that reads and executes JavaScript is an
interpreter
• Interpreted vs. compiled languages:

– Advantage: simplicity
– Disadvantage: efficiency
• JavaScript is a scripting language: designed to be executed within a larger

software environment
• JavaScript can be run within a variety of environments:

– Web browsers (our focus in next chapter)
– Web servers
– Application containers (general-purpose programming)
• Components of a JavaScript implementation:

– Scripting engine: interpreter plus required ECMAScript functionality (core
library)
– Hosting environment: functionality specific to environment
• Example: browsers provide alert and prompt
• All hosting environment functionality provided via objects
• All data in JavaScript is an object or a property of an object
• Types of JavaScript objects

– Native: provided by scripting engine
• If automatically constructed before program execution, known as a
built-in object (ex: window)
– Host: provided by host environment
• alert and prompt are host objects
Basic JavaScript Syntax
Notice that there is no main() function/method
//HighLow.js Comments like Java/C++ (/* */ also allowed)
Var thinkOf; //Number the computer has chosen (1 through 1000)

Var guess; // User’s latest guess
Semi-colons are usually
//initialize the computer’s number
not required, but always
thinkingOf = Math.ceil(Math.random() * 1000) ; allowed at statement end
//play until user guess the number
guess = window. Prompt(“ I am thinking of a number between 1 and 1000.” +

“what is it ?”, “ “) ;
String concatenation operator as

Arithmetic operators same as Java/C++ well as addition
Argument lists are comma-separated
Object dot notation for method calls as in Java/C++
Variables and Data Types
• Type of a variable is dynamic: depends on the type of data it contains

• JavaScript has six data types:
– Number
– String
– Boolean (values true and false)
– Object
– Null (only value of this type is null)
– Undefined (value of newly created variable)
• Primitive data types: all but Object
• typeof operator returns string related to data type
– Syntax: typeof expression
Table: values returned by typeof for various operands:
Variables
• Naming conventions
• Global
o Global variables are declared simply by assigning a value:
 x = 10;
• Local
o Local variables are declared inside a function:
 var x;
• Undefined vs. Null-value
• Syntax rules for names (identifiers):

o Must begin with letter or underscore ( _ )
o Must contain only letters, underscores, and digits (or certain other
characters)
o Must not be a reserved word
Reserved words in J Scripts:

JavaScript Statements
• Expression statement: any statement that consists entirely of an expression

– Expression: code that represents a value
• Block statement: one or more statements enclosed in { } braces
• Keyword statement: statement beginning with a keyword, e.g., var or if
JavaScript Operators
• Operators are used to create compound expressions from simpler expressions

• Operators can be classified according to the number of operands involved:
– Unary: one operand (e.g., typeof i)
• Prefix or postfix (e.g., ++i or i++ )
– Binary: two operands (e.g., x + y)
– Ternary: three operands (conditional
Escape sequence:
Arithmetic Operator:
Decision Making:
• Associativity:
– Assignment, conditional, and prefix unary operators are right associative:
equal-precedence operators are evaluated right-to-left:
– Other operators are left associative: equal-precedence operators are
evaluated left-to-right
• Binary operators +, -, *, /, % convert both operands to Number

– Exception: If one of operands of + is String then the other is converted to
String
• Relational operators <, >, <=, >= convert both operands to Number
– Exception: If both operands are String, no conversion is performed and
lexicographic string comparison is performed
JavaScript Literals:
• Literals are used to represent values in java script.
Types of literals:
1. Numeric literals
• Integers
• Floating –point numbers
2. String literals
• String literals is zero (or) more character enclosed in double (“ “) (or) single
( ‘ ‘) quotation marks.
3. Boolean literals
• Boolean literal have two type of value.
i. True
ii. false
Functions in JavaScript
• Declared within other functions. These are called “inner functions” and are the
main idea behind closures in JavaScript.
• Built-in functions are almost completely concerned with validating argument types
which are commonly passed into functions or methods as well as converting
variables to and from these types.
• This includes specifics such as NaN(), infinity(), and undefined(), as well as
functions for encoding and decoding data.
• Functions can be created through several different techniques, and since JavaScript
uses first-class functions, they are treated as objects.
• Function objects have properties, and can be passed around and used just like any
other object.
• Variables, literals, and objects can be passed as arguments.
• The argument list is an array with the same name.
• Overloading is not implemented, but can be simulated
• Function declaration syntax:
function validate()
{
alert(“this is example”);
}
• Function call semantics details:

– Arguments:
• May be expressions:
• Object’s effectively passed by reference (more later)
– Formal parameters:
• May be assigned values, argument is not affected
– Return value:
• If last statement executed is not return-value, then returned value is
of type Undefined
• Number mismatch between argument list and formal parameter list:

– More arguments: excess ignored
– Fewer arguments: remaining parameters are Undefined
• Recursive functions
– Recursion (function calling itself, either directly or indirectly) is supported
– C++ static variables are not supported
– Order of declaration of mutually recursive functions is unimportant (no
need for prototypes as in C++)
• Explicit type conversion supplied by built-in functions

– Boolean(), String(), Number()
– Each takes a single argument, returns value representing argument
converted according to type-conversion rules given earlier
Flow Control
 If…else
 While
 Do-while
 For
 Return
 Break
 Switch
Object Introduction
• An object is a set of properties
• A property consists of a unique (within an object) name with an associated value
• The type of a property depends on the type of its value and can vary dynamically
• There are no classes in JavaScript

• Instead, properties can be created and deleted dynamically
Object Creation:
• Objects are created using new expression
• A constructor is a function
– When called via new expression, a new empty Object is created and passed
to the constructor along with the argument values
– Constructor performs initialization on object
• Can add properties and methods to object
• Can add object to an inheritance hierarchy
• The Object() built-in constructor
– Does not add any properties or methods directly to the object
– Adds object to hierarchy that defines default toString() and valueOf()
methods (used for conversions to String and Number, resp.)
Property Creation
• Assignment to a non-existent (even if inherited) property name creates the

property:
• Object initializer notation can be used to create an object (using Object()
constructor) and one or more properties in a single statement:
Enumerating Properties
• Special form of for statement used to iterate through all properties of an object:
Accessing Property Values
• The JavaScript object dot notation is actually shorthand for a more general
associative array notation in which Strings are array indices:
• Expressions can supply property names:
Object Methods
• JavaScript functions are stored as values of type Object

• A function declaration creates a function value and stores it in a variable (property
of window) having the same name as the function
• A method is an object property for which the value is a function
Object Constructors
• User-defined constructor is just a function called using new expression:
• Object created using a constructor is known as an instance of the constructor
JavaScript Arrays
• The Array built-in object can be used to construct objects with special properties
and that inherit various methods
• The Array constructor is indirectly called if an array initializer is used

• Array initializiers can be used to create multidimensional arrays
• Value of length is not necessarily the same as the actual number of elements
Methods inherited by array objects:

Built-in Objects
• JavaScript’s collection of built-in objects is relatively small compared to other

languages, but still provides the basic objects needed for most functional
programming.
• This includes mathematical objects, date/time objects and objective arrays.
• Each type of built-in object is supported with several methods used to
manipulate and display the data associated with them.
• As stated before, JavaScript functions themselves are objects, and there are
some other surprising objects such as strings and numbers which many
programmers are used to seeing within built-in data types. This allows for
elaborate string and number manipulation.
• Properties provided by Number built-in object:
o Number.MIN_VALUE: smallest (absolute value) possible JavaScript
Number value
o Number.MAX_VALUE: largest possible JavaScript Number value
MathObject
Methods of the StringObject
Date Object:
Booleanand NumberObjects
JavaScript Global Functions
Java Script String Object:
Java Script String Object Method Description

anchor() Creates an HTML anchor
big() Displays a string in a big font
blink() Displays a blinking string
bold() Displays a string in bold
charAt() Returns the character at a specified position
charCodeAt() Returns the Unicode of the character at a specified position
concat() Joins two or more strings
fixed() Displays a string as teletype text
fontcolor() Displays a string in a specified color
fontsize() Displays a string in a specified size
fromCharCode() Takes the specified Unicode values and returns a string
indexOf() Returns the position of the first occurrence of a specified
string value in a string
italics() Displays a string in italic
lastIndexOf() Returns the position of the last occurrence of a specified
string value, searching backwards from the specified
position in a string
link() Displays a string as a hyperlink
match() Searches for a specified value in a string
replace() Replaces some characters with some other characters in a
string
search() Searches a string for a specified value
slice() Extracts a part of a string and returns the extracted part in a
new string
small() Displays a string in a small font
split() Splits a string into an array of strings
strike() Displays a string with a strikethrough
sub() Displays a string as subscript
substr() Extracts a specified number of characters in a string, from a
start index
substring() Extracts the characters in a string between two specified
indices
sup() Displays a string as superscript
toLowerCase() Displays a string in lowercase letters
toUpperCase() Displays a string in uppercase letters
toSource() Represents the source code of an object
valueOf() Returns the primitive value of a String object
String Object Properties:
Property Description
constructor A reference to the function that created the object
length Returns the number of characters in a string
prototype Allows you to add properties and methods to the object
Java Script Debugger:
• JavaScript debugging has some specifics in comparison with stand-alone

applications.
• JavaScript programs usually rely on interaction with the loaded page's Document
Object Model (DOM) so errors may be caused by wrong DOM usage in a
technically correct script.
• This makes JavaScript errors difficult to find. However nowadays there are al lot
of reasonably good JavaScript debuggers.
• JavaScript debugger provides you with a set of tools that aid in the process of
inspecting, monitoring and editing JavaScript code.
• You can use the debugger to identify errors, or step through execution and explore
the state of your application at any given moment.
• Numerous debugging windows are also at your disposal, affording an intuitive
interface to examine variable and expression values, threads, sessions, breakpoints
and more.
• The NetBeans JavaScript debugger offers a common user experience for both
Firefox and Internet Explorer.
• Debugger support for FireFox is based on Firebug, whereas for Internet Explorer
it is based on the Active Scripting debugger framework.
Enabling and Disabling Java Script Debugger:
• By default, the JavaScript debugger is disabled in the IDE.

• When starting the debugger for the first time however, the IDE presents you
with a dialog that allows you to activate it for your browser.
• At all times, you can activate or disable the debugger from the Project Properties
window.
1. In the Projects window, right-click your project and choose Properties.
2. In the Project Properties dialog, select the Debug category.
3. Toggle the Debug Web Application (Client side JavaScript) option.
4. Select the browser you plan to use (Firefox or Internet Explorer).
Click OK to close the window.

Starting the Debugger:
When you run the debugger for the first time, the IDE first checks if you have the
appropriate resources and extensions installed in your browser.
• Internet Explorer
• Firefox
Internet Explorer
1. Start the debugger by right-clicking your project in the Projects window and
choosing Debug.
2. In the dialog box that displays, select the Server side Java with client side
JavaScript in the selected browser option. Then select Internet Explorer.
3. Click Debug. When you select the client-side debugging option for Internet
Explorer and click Debug, the IDE first ensures that you have the Active
Scripting debugger framework installed. If it have not been installed, you are
prompted to download and install the framework.
Your browser is launched to the location on Microsoft's website where you can
download the framework. Download and install the framework.
4. Once you receive confirmation that the Active Scripting debugger framework has
been installed, return to the IDE and click OK. The IDE checks if you have the
NetBeans Internet Explorer extension registered in your browser. If not, a dialog
displays, prompting you to enable the IDE to install the NetBeans Internet
Explorer extension.
5. Click OK. The IDE registers the extension in your browser, the debugging session
is initiated, and the welcome page of the application you are running the
debugging session on displays in your browser.
6. Return focus to the IDE. The debugger toolbar is displayed above the editor. All
icons of the toolbar are activated when the code becomes suspended. The project
index page opens in the IDE's editor.
By default, numerous windows are activated in the lower region of the IDE,
including the Watches, Local Variables, and Call Stack windows. The debugger
console initially displays in the Output window, indicating that a debugging
session has been started. The debugger console can be used during a debugging
session to show evaluation errors, thrown exceptions, and other information.

IT 2352-Unit 2

Uploaded by

Document Information

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

IT 2352-Unit 2

Uploaded by

Copyright:

Available Formats

UNIT II

Style Sheets: CSS-Introduction to Cascading Style Sheets-Features-Core Syntax-Style

Cascading Style Sheets:

• CSS is designed primarily to enable the separation of document content (written in

• A style sheet consists of a list of rules.

<style type= “text/css”>

All style rules are composed of three parts:

2. Properties: Properties are predefined attributes that can be applied

3. Values: Values are the specific setting chosen for a property.

4. The combination of a property and the associated value is called a definition.

<H1 style="color: blue; font-style: italic"> I'm blue</H1>

<STYLE type="text/css">H1 H2 H3 {color: green; text-transform:

<LINK href="somefile.css" rel="stylesheet" type="text/css">

• Selectors are a way to match styles to elements in the document tree.

• Class selector is used to apply different style to the same element.

• Generic selector is used to define the class in generalized form.

• The <BR>, <FRAMESET> and <FRAME> tags cannot be used as selectors.

CSS: Text properties

CSS: Background properties

CSS: Font properties

The Basis of CSS layout:

Every CSS box is divided into regions, consisting of:

CSS: Margin properties

• Margins define the space around elements outside the border

CSS: Padding properties

CSS: List properties

CSS: Normal Flow Model

Other CSS layout properties

• Color and background image

• JavaScript is a scripting language developed by Netscape that is used to modify

Java Script Versions

• Note that JavaScript code did not need to be compiled

• Interpreted vs. compiled languages:

• JavaScript is a scripting language: designed to be executed within a larger

• JavaScript can be run within a variety of environments:

• Components of a JavaScript implementation:

• All data in JavaScript is an object or a property of an object

• Types of JavaScript objects

Notice that there is no main() function/method

//HighLow.js Comments like Java/C++ (/* */ also allowed)

Var thinkOf; //Number the computer has chosen (1 through 1000)

//play until user guess the number

guess = window. Prompt(“ I am thinking of a number between 1 and 1000.” +

String concatenation operator as

Argument lists are comma-separated

Object dot notation for method calls as in Java/C++

Variables and Data Types

• Type of a variable is dynamic: depends on the type of data it contains

• Syntax rules for names (identifiers):

Reserved words in J Scripts:

• Expression statement: any statement that consists entirely of an expression

• Operators are used to create compound expressions from simpler expressions

• Binary operators +, -, *, /, % convert both operands to Number

• Literals are used to represent values in java script.

• Function call semantics details:

• Number mismatch between argument list and formal parameter list:

• Explicit type conversion supplied by built-in functions

• There are no classes in JavaScript

• Objects are created using new expression

• Assignment to a non-existent (even if inherited) property name creates the

Accessing Property Values

• Expressions can supply property names:

• JavaScript functions are stored as values of type Object

• Object created using a constructor is known as an instance of the constructor