[go: up one dir, main page]
Scribd
Upload
28 views61 pages

Mod 1,2

Uploaded by

danieltrc.rvitm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views61 pages

Mod 1,2

Uploaded by

danieltrc.rvitm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 61

Rashtreeya Sikshana Samithi Trust

RV Institute of Technology and Management ®

JPNagar,Bengaluru-560076
(Affiliated to VTU, Belagavi)

Department of Master of Computer Applications

Course Name: WEB TECNOLOGIES

Code: 22MCA24

Prepared By:
Dr.Chethan Venkatesh
Associate Professor
Department of MCA
RVITM Bangalore
Email:chethanvenkatesh.rvitm@rvei.edu.in
CSS (Cascading Style Sheets)
 CSS stands for Cascading Style Sheets
 CSS saves a lot of work. It can control the layout of multiple
web pages all at once.
 CSS is the language we use to style an HTML document.
 CSS describes how HTML elements should be displayed.

CSS Syntax
 A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations


separated by semicolons.
 Each declaration includes a CSS property name and a value,
separated by a colon.
 Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
1|Page MASTEROFCOMPUTERAPPLICATIONS
font-family: times new roman; font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
 In above example,
 p is a selector in CSS (it points to the HTML element you want
to style: <p>).
 font-family is a property, and times new roman is the property
value
 font-size is a property, and 20px is the property value

LEVELS OF STYLE SHEETS


 The three levels of style sheets, in order from lowest level to
highest level, are inline, document level, and external.
 Inline style sheets apply to the content of a single XHTML
element.
 Document-level style sheets(internal ) apply to the whole body
of a document.
 External style sheets can apply to the bodies of any number of
documents.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML
element.
An inline CSS uses the style attribute of an HTML element.
Example: inline.xhtml

2|Page MASTEROFCOMPUTERAPPLICATIONS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<h1 style="color:blue;"><center>Web Programming</center></h1>
<p style="color:red;"><center>Java Programming</center></p>
</body>
</html>
Document-level style sheets or Internal CSS
 An internal CSS is used to define a style for a single HTML
page.
 An internal CSS is defined in the <head> section of an HTML
page, within a <style> element.
Example: internal.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {background-color: blue;} h1 {color: yellow;}
p {color: red;}
</style>
</head>
<body>
<h1>welcome</h1>
<p>hi</p>
<h1>Web Programming</h1>
<p>Bangalore</p>
</body>
</html>

3|Page MASTEROFCOMPUTERAPPLICATIONS
External CSS
 An external style sheet is used to define the style for many
HTML pages.
 To use an external style sheet, add a link to it in the <head>
section of each HTML page:
 The external style sheet can be written in any text editor.
 The file must not contain any HTML code, and must be saved
with a .css extension.
 It uses the <link> tag on every pages and the <link> tag should
be put inside the head section.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h1><center>BANGALORE</center></h1>
<p><b><center>HYDERABAD</center></b></p>
</body>
</html>

Syntax:
 <link rel="stylesheet" type="text/css" href="style.css" />
Example: external.xhtml
 The REL attribute is used to define the relationship between the
linked file and
the HTML document.
REL=StyleSheet specifies
a persistent or preferred style.A persistent style is one that is
always
applied when style sheets are enabled.
 (Hypertext REFerence) The HTML code used to create a link
to another page

4|Page MASTEROFCOMPUTERAPPLICATIONS
CSS Selectors
 CSS selectors are used to select the content you want to style.
 Selectors are the part of CSS rule set.
 CSS selectors select HTML elements according to its id, class,
type, attribute etc.
 There are several different types of selectors in CSS
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector

The CSS element Selector


 The element selector selects HTML elements based on the
element name.
Example: element.xhtml
 Here, all <p> elements on the page will be center-aligned, with a
red text color:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional


//EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p >Me too!</p>
<p>And me!</p>
</body>
</html>

5|Page MASTEROFCOMPUTERAPPLICATIONS
The CSS id Selector
 The id selector uses the id attribute of an HTML element to
select a specific element.
 The id of an element is unique within a page, so the id selector
is used to select one unique element.
 To select an element with a specific id, write a hash (#)
character,
followed by the id of the element.
Example: id.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> #para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
</body>
</html>

The CSS class Selector


 The class selector selects HTML elements with a specific class
attribute.
 To select elements with a specific class, write a period (.)
character, followed by the class name.
Example: class.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>

6|Page MASTEROFCOMPUTERAPPLICATIONS
.mca {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="mca">MANGALORE</h1>
<p class="mca">BANGALORE</p>
</body>
</html>

The CSS Universal Selector


 The universal selector (*) selects all HTML elements on the
page.
Example: universal.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{
text-align: center; color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>WELCOME</p>
<p >MCA</p>
<p>DEPARTMENT</p>
</body>
</html>

7|Page MASTEROFCOMPUTERAPPLICATIONS
The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same
style definitions.
• Look at the following CSS code (the h1, h2, and p elements have
the same style definitions):
Example: group.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 { text-align: center; color: red; } h2 {text-align: center; color:
green; }
p {text-align: center; color: blue; }
</style>
</head>
<body>
<h1>Hello </h1>
<h2>HI</h2>
<p>WELCOME</p>
</body>
</html>
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
• Example:group1.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1, h2, p {text-align: center; color: red; }
</style>
</head>
<body>
<h1>Hello</h1>
8|Page MASTEROFCOMPUTERAPPLICATIONS
<h2>HI</h2>
<p>WELCOME</p>
</body>
</html>
CSS Font Properties

 CSS Font property is used to control the look of texts.


 By the use of CSS font property you can change the text size,
color, style and more.
 Here, you will also know how to resize your font using
percentage.

Font attributes:

 CSS Font color: This property is used to change the color of the
text. (standalone attribute)
 CSS Font family: This property is used to change the face of
the font
 CSS Font size: This property is used to increase or decrease the
size of the font.
 CSS Font style: This property is used to make the font bold,
italic or oblique
 CSS Font variant: This property creates a small-caps effect.
 CSS Font weight: This property is used to increase or decrease
the boldness and lightness of the font.

CSS Font Color


 CSS font color is a standalone attribute in CSS
 It is used to change the color of the text.
 There are three different formats to define a
color: By a color name
By hexadecimal value By RGB
Example: font.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


9|Page MASTEROFCOMPUTERAPPLICATIONS
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> body {
Font-size:200%;
}
h1 { color: red; } h2 { color: #9000A1; }
p { color:rgb(0, 220, 98);
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS Font Family
In CSS there are five generic font families:
 Serif fonts have a small stroke at the edges of each letter. They
create a sense of formality and elegance.

 Sans-serif fonts have clean lines (no small strokes attached).


They create a modern and minimalistic look.

 Monospace fonts - here all the letters have the same fixed width.
They create a mechanical look.

 Cursive fonts imitate human handwriting.

 Fantasy fonts are decorative/playful fonts.

10|Page MASTEROFCOMPUTERAPPLICATIONS
Example: fontfamily.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { font-size: 100%; }
h1 { font-family: sans-serif; } h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>

11|Page MASTEROFCOMPUTERAPPLICATIONS
CSS Font Size
 CSS font size property is used to change the size of the font.
(fontsize.xhtml)
Font Size Value Description
xx-small used to display the extremely small text
size.
x-small used to display the extra small text size.
small used to display small text size.
medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text
size.
smaller used to display comparatively smaller
text size.
larger used to display comparatively larger
text size.
size in pixels or % used to set value in percentage or in

12|Page MASTEROFCOMPUTERAPPLICATIONS
pixels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Practice CSS font-size property</title>
</head> <body>
<p style="font-size:xx-small;"> This font size is extremely
small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large.
</p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>

CSS Font Style


 CSS Font style property defines what type of font you want to
display.
 It may be italic, oblique, or normal.
Example: fontstyle.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN” "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>

13|Page MASTEROFCOMPUTERAPPLICATIONS
body { font-size: 100%; }
h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style:
normal; }
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>

CSS Font Variant


 CSS font variant property specifies how to set font variant of an
element.
 It may be normal and small-caps.
Example: fontvariant.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p { font-variant: small-caps; } h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>

CSS Font Weight


 CSS font weight property defines the weight of the font and
specify that how bold a font is.
 The possible values of font weight may be normal, bold, bolder,
lighter or number (100, 200..... upto 900).

14|Page MASTEROFCOMPUTERAPPLICATIONS
Example: weight.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>

Font Shorthands: (short.xhtml)

 To shorten the code, it is also possible to specify all the


individual font properties in one property.

 The font property is a shorthand property for:

font-style
font-variant
font-weight
font-size/line-height
font-family

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN"

15|Page MASTEROFCOMPUTERAPPLICATIONS
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Font Properties</title>
<style type = "text/css">
.one {font-family: 'lucida calligraphy'; font-weight:bold; font-
size:30pt; color: purple; }
.two { font-family: 'Arial'; color: green; }
.three { font:'times new roman'; }
</style>
</head>
<body>
<p class = "one">MASTER OF COMPUTER APPLICATIONS</p>
<h1 class = "two">MASTER OF COMPUTER
APPLICATIONS</h1>
<p class = "three">MASTER OF COMPUTER
APPLICATIONS</p>
</body>
</html>

Pseudo Classes:
 Pseudo class selectors are used if the properties are to be
changed dynamically.
o For example: when mouse movement happens, in other
words, hover happens or focus happens.

Example:pseudo.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample CSS</title>
<style type = "text/css">
input:hover
{ font-family: 'Gabriola'; color: red; font-size:100; }
</style>

16|Page MASTEROFCOMPUTERAPPLICATIONS
</head>
<body>
<form>
NAME: <input type = "text" />
</form>
</body>
</html>

LIST PROPERTIES

In HTML, there are two main types of lists:


 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or
letters
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
 Add background colors to lists and list items
Different List Item Markers
 The list-style-type property specifies the type of list item
marker.
 Example: list.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Bullets</title>
<style>
.one {list-style-type:disc }
.two{ list-style-type:square}
.three{ list-style-type:circle }
</style>
</head>
<body>

17|Page MASTEROFCOMPUTERAPPLICATIONS
<h3>MCA SUBJECTS</h3>
<ul>
<li class ="one"> Web Programming</li>
<li class ="two"> Java Programming</li>
<li class ="three"> DBMS</li>
</ul>
</body>
</html>

Color Property
 In CSS, we use color values for specifying the color.
 We can also use this property for the border-color and other
decorative effects.
 Set the text-color for different elements

CSS Syntax
color: color|initial|inherit;

Property Values

Value Description
color Specifies the text color.
initial Sets this property to its default value. inherit Inherits
this property from its parent element.

We can define the color of an element by using the following ways:

 RGB format.(RED GREEN and BLUE) example: body {color:


rgb(201, 76, 76);}

 RGBA format.(RED GREEN BLUE Alpha) example:body {color:


rgba(201, 76, 76, 0.6);}

 Hexadecimal notation.
example: body {color: #92a8d1;}

 HSL(Hue, Saturation, and Lightness). example: body {color:

18|Page MASTEROFCOMPUTERAPPLICATIONS
hsl(89, 43%, 51%);}

 HSLA(Hue, Saturation, Lightness and Alpha). example:


body {color: hsla(89, 43%, 51%, 0.6);}

Example: color.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> body
{color: red;}
h1 {color: #00ff00;}
.ex {color: rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p><pre>hello.</pre></p>
<p class="ex">welcome.</p>
</body>
</html>

Text Property

 CSS has a lot of properties for formatting text.


Text Color
Text Alignment
Text Decoration
Text Transformation
Text Shadow
Text Spacing

19|Page MASTEROFCOMPUTERAPPLICATIONS
Text Color
 The color property is used to set the color of the text.
Example: textcolor.xhtml

<!DOCTYPE html PUBLIC "-//W3C//


DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {color: blue;} h1 {color: green;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>HI</p>
</body>
</html>

Text Alignment
 The text-align property is used to set the horizontal alignment of
a text.
 A text can be left or right aligned, centered, or justified.
Example: textalign.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 {text-align: center;} h2 {text-align: left;} h3 {text-align: right;}
</style>
</head>
<body>

20|Page MASTEROFCOMPUTERAPPLICATIONS
<h1>MSc</h1>
<h2>MCA </h2>
<h3>MBA</h3>
</body>
</html>

Text Decoration:
 The text-decoration property is used to specify some special
features of text.
 The available values are line-through, overline, underline, and
none, which is the default.
Example :decoration.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Decoration</title>
<style >
.one{ text-decoration: line-through;}
.two{ text-decoration: overline; }
.three{text-decoration: underline;}
</style>
</head>
<body>
<h1 class = "one">MCA</h1> <br/>
<h1 class = "two">MCA</h1> <br/>
<h1 class = "three">MCA</h1><br/>
</body>
</html>

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

21|Page MASTEROFCOMPUTERAPPLICATIONS
Example :trans.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.uppercase { text-transform: uppercase; }
.lowercase{ text-transform: lowercase; }
.capitalize { text-transform: capitalize;}
</style>
</head>
<body>
<h1>Using the text-transform property</h1>
<p class="uppercase">hi</p>
<p class="lowercase">HELLO</p>
<p class="capitalize">welocome to mca</p>
</body>
</html>

Text Shadow
 The text-shadow property adds shadow to text.
 In its simplest use, you only specify the horizontal shadow (2px)
and the vertical shadow (2px).

Example: shadow.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>

22|Page MASTEROFCOMPUTERAPPLICATIONS
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Text Spacing
the following are text spacing properties:
 text-indent
 letter-spacing
 line-height
 word-spacing
 white-space

Text Indentation
The text-indent property is used to specify the indentation of the first
line of a text:
Example: (indent.xhtml)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p {text-indent: 150px; }
</style>
</head>
<body>
<h1>Using text-indent</h1>
<p><pre>In my younger and more vulnerable years my
father gave me some advice that I've been turning over in my mind
ever since.
'Whenever you feel like
criticizing anyone,' he told me, 'just remember that all the people
in this world haven't had the advantages
that you've had.'</pre></p>
</body>

23|Page MASTEROFCOMPUTERAPPLICATIONS
</html>
Letter-spacing
The letter-spacing property is used to specify the space between the
characters in a text.
The following example demonstrates how to increase or decrease the
space between characters:
Example: letter.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h2 {letter-spacing: 25px;} h3 {letter-spacing: 20px;}
</style>
</head>
<body>
<h1>Using letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
</html>

Line Height
 The line-height property is used to specify the space between
lines:
Example: line.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.small{line-height: 3;}
.big {line-height: 1.8;}
</style>

24|Page MASTEROFCOMPUTERAPPLICATIONS
</head>
<body>
<p class="small"><pre>
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.</pre>
</p>
<p class="big"><pre>
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.</pre>
</p>
</body>
</html>

word-spacing
 The word-spacing property is used to specify the space between
the words in a text.
 The following example demonstrates how to increase or
decrease the space between words:
Example: wordspace.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//
EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.one{word-spacing: 10px;}
.two { word-spacing: 23px;}
</style>
</head>
<body>
<p class="one">This is a paragraph with larger word spacing.</p>
<p class="two">This is a paragraph with smaller word spacing.</p>
</body>
</html>

25|Page MASTEROFCOMPUTERAPPLICATIONS
white-space
 The white-space property specifies how white-space inside an
element is handled.
 This example demonstrates how to disable text wrapping inside
an element.
 The following example demonstrates how white space inside an
element is handled. Possible values are normal, pre.

Example:white.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<p style = "white-space:normal">
This text has a line break and the white-space pre setting tells the
browser to honor it just like the XHTML pre tag.
</p>
</body>
</html>

The CSS Box Model


Each element in an HTML document is treated
as a rectangular box by CSS.
This is the default layout scheme and can be customized
as per our requirements.
The positioning of elements, their content, and their surrounding
elements
are done following the box model of CSS.

26|Page MASTEROFCOMPUTERAPPLICATIONS
 Content
This includes the actual data in the form of text, image or other media
content.
The width and height properties modify the dimensions of this box.

 Padding
The space between the outer edge of the content and its border refers
to padding.
This box can be resized by the padding property.
Edge-specific properties like padding-left, padding-bottom, etc. help
in achieving custom spacing.

 Border
The distance between the outer edge of the padding and the inner
edge of the margin defines the border of an element.
By default, its width is set to 0.

27|Page MASTEROFCOMPUTERAPPLICATIONS
The border property is used to define an element’s border.
Individual edges can also be styled.

 Margin
The space between an element’s box and its surrounding elements’
box is
defined as margin.

Example:boxmodel.html

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey; width: 300px; border:
15px solid green; padding: 50px;margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>hi</p>
<div>welcome</div>
</body>
</html>

CSS Borders
 The CSS border properties allow you to specify the style, width,
and color of an element's border.
 The border-style property can have from one to four values (for
the top border, right border, bottom border, and the left border).

The following values are allowed:


dotted - Defines a dotted border dashed - Defines a dashed border

28|Page MASTEROFCOMPUTERAPPLICATIONS
solid - Defines a solid border double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the
border-color value ridge - Defines a 3D ridged border. The effect
depends on the border-color value inset - Defines a 3D inset border.
The effect depends on the border-color value outset - Defines a 3D
outset border. The effect depends on the border-color value none -
Defines no border
hidden - Defines a hidden border

example:boder.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
</body>
</html>

CSS Border Width


 The border-width property specifies the width of the four
borders.
 The width can be set as a specific size (in px, pt, cm, em, etc) or
by using one of the three pre-defined values: thin, medium, or
thick:
example:borderwidth.xhtml
<!DOCTYPE html>

29|Page MASTEROFCOMPUTERAPPLICATIONS
<html>
<head>
<style>
p.one { border-style: solid; border-width: 5px; } p.two { border-
style: solid; border-width: medium; }
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
</body>
</html>

 CSS Border Color


 The border-color property is used to set the color of the four
borders.
 The color can be set by:

name - specify a color name,


HEX - specify a HEX value
RGB - specify a RGB value
HSL - specify a HSL value

<!DOCTYPE html>
<html>
<head>
<style>
p.one {border-style: solid; border-color: red }
</style>
</head>
<body>
<p class="one">A solid red border</p>
</body>
</html>

Margins and Padding:

30|Page MASTEROFCOMPUTERAPPLICATIONS
 The margin properties are named margin, which applies to all
four sides of an element: margin-left, margin-right, margin-
top, and margin-bottom.
example: margin.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style>
div {
border: 1px solid black; margin-top: 100px; margin-bottom: 100px;
margin-right: 150px; margin-left: 80px; background-color: lightblue;
}
</style>
</head>
<body>
<div>welcome.</div>
</body>
</html>

 CSS Padding
 Padding is used to create space around an element's content,
inside of any defined borders.
 Padding - Individual Sides
padding-top
padding-right
padding-bottom
padding-left
 All the padding properties can have the following values: length
- specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
example: padding.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
31|Page MASTEROFCOMPUTERAPPLICATIONS
<head>
<style> div {
border: 1px solid black; padding-top: 50px; padding-right: 30px;
padding-bottom: 50px; padding-left: 80px;
}
</style>
</head>
<body>
<div>welcome </div>
</body>
</html>

CSS background properties:


 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

CSS background-color
The background-color property specifies the background
color of an element.
Example
body { background-color: lightblue; }

Opacity / Transparency
The opacity property specifies the opacity/transparency
of an element. It can take a value from 0.0 - 1.0.
The lower value, the more transparent:
Example
div { background-color: green; opacity: 0.3;}

CSS background-image
The background-image property specifies an image to use as the
background of an element.

32|Page MASTEROFCOMPUTERAPPLICATIONS
THE <span> AND <div> TAGS

span tag
 A <span> element which is used to color a part of a text
 The <span> tag is an inline container used to mark up a part
of a text, or a part of a document.
 The <span> tag is easily styled by CSS or manipulated with
JavaScript using the class or id attribute.
 The <span> tag is much like the <div> element, but <div> is a
block-level element and <span> is an inline element

Example:

<!DOCTYPE html>
<html>
<body>
<p>hi <span style="color:blue;">hello</span></p>
</body>
</html>

Div tag
 The <div> tag defines a division or a section in an HTML
document.
 The <div> tag is used as a container for HTML elements -
which is then styled with CSS or manipulated with JavaScript.
 The <div> tag is easily styled by using the class or id attribute.
 Any sort of content can be put inside the <div> tag!
Example: divtag.xhtml

33|Page MASTEROFCOMPUTERAPPLICATIONS
 JavaScript (js) is a light-weight object-oriented programming
language which is used by several websites for scripting the
webpages.

 It is an interpreted, full-fledged programming language that


enables dynamic
 interactivity on websites when applied to an HTML document.

 It was introduced in the year 1995 for adding programs to the


webpages in the
 Netscape Navigator browser.

 JavaScript is the world's most popular programming language.

 JavaScript is the programming language of the Web.

 JavaScript is easy to learn.

JavaScript Features
 Light Weight Scripting language: it is made for data handling
in the browser or the client side.
 Dynamic Typing: the variable are defined based on the stored
value.
 Object-oriented programming support: two important principles
with OOP in JavaScript
are:

Object Creation Patterns


(Encapsulation) Code Reuse patterns
(Inheritance)
 Platform Independent: write the script once and run it anywhere
and anytime.
 Interpreted Language: the script written inside JavaScript is
processed line by line.
 Client-side Validations: JavaScript is used for implementing
client-side validations.

34|Page MASTEROFCOMPUTERAPPLICATIONS
 Application of JavaScript
 JavaScript is used to create interactive websites.
 It is mainly used for:
 Client-side validation,
 Dynamic drop-down menus,
 Displaying date and time,
 Displaying pop-up windows and dialog boxes (like an alert
dialog box, confirm dialog box and prompt dialog box)

Different Ways to Use JS in HTML


 Between the head tag of html
 Between the body tag of html
 In .js file (external javaScript)

<html>
<head>
<script>
document.write("Hello world, in the head section")
</script>
<title>Title for the web page</title>
</head>
<body>
<h1>We are learning JavaScript</h1>
</body>
</html>

<html>
<head>
<title>Title for the web page</title>
</head>
<body>
<script>
document.write("JS in the body section")
</script>
<h1>We are learning JavaScript</h1>
</body>
</html>
35|Page MASTEROFCOMPUTERAPPLICATIONS
<html>
<head>
<script src="file.js" ></script>
<title>Title for the web page</title>
</head>
<body>
<h1>We are learning JavaScript</h1>
</body>
</html>

<html>
<head>
<title>Title for the web page</title>
</head>
<script>
document.write("JS in between head and body section")
</script>
<body>
<h1>We are learning JavaScript</h1>
</body>
</html>

<html>
<head>
<title>web page</title>
</head>
<body>
<h1>We are learning JavaScript</h1>
</body>
</html>
<script>
document.write("JS after the html or end of html doc")
</script>

36|Page MASTEROFCOMPUTERAPPLICATIONS
The JavaScript comments are meaningful way to deliver message.
It is used to add information about the code, suggestions so that
end user can easily interpret the code.
Advantages of JavaScript comments
 To make code easy to understand

Types of JavaScript Comments


1.Single-line Comment
2.Multi-line Comment

JavaScript Single line Comment


It is represented by double forward slashes (//). It can be used before
and after the statement.

JavaScript Multi line Comment


It is represented by forward slash with asterisk then asterisk with
forward slash. For example:

/* your code here */

A JavaScript variable is simply a name of storage location.


There are two types of variables in JavaScript :
1. local variable
2. global variable.
Rules while declaring a JavaScript variable (also known as
identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ),


or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are
different variables.

37|Page MASTEROFCOMPUTERAPPLICATIONS
Example:

<html>
<body>
<script> var x = 10; var y = 20; var z=x+y;
document.write(z);
</script>
</body>
</html>

JavaScript local variable


A JavaScript local variable is declared inside block or function. It is
accessible within the function or block only.
Example:
<html>
<body>
<script> var x = 10; var y = 20; var z=x+y;
document.write(z);
</script>
</body>
</html>

JavaScript global variable


A JavaScript global variable is accessible from any function.
A variable i.e. declared outside the function
<html>
<body>
<script>
var data=200;//gloabal variable function a()
{
document.write(data);
}
a();//calling JavaScript function
</script>
</body>

38|Page MASTEROFCOMPUTERAPPLICATIONS
</html>

JavaScript Data Types

JavaScript provides different data types to hold different types of


values. There are two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive data type
JavaScript is a dynamic type language.
var here to specify the data type. It can hold any type of values such
as numbers, strings etc. For example:
Example:
var a=40;//holding number var b="Rahul";//holding string

JavaScript primitive data types


There are five types of primitive data types in JavaScript.

Data Type Description


String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all

JavaScript non-primitive data types

Data Type Description


Object represents instance through which we can access
members Array represents group of similar values
RegExp represents regular expression

JavaScript Operators
JavaScript operators are symbols that are used to perform operations
on operands. For example:
var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.

39|Page MASTEROFCOMPUTERAPPLICATIONS
There are following types of operators in JavaScript.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations on the


operands. The following operators are known as JavaScript arithmetic
operators.

Operator Description Example


+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus 20%10 = 0

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

40|Page MASTEROFCOMPUTERAPPLICATIONS
JavaScript Comparison Operators
The JavaScript comparison operator compares the two operands. The
comparison operators are as follows:

Operator Description Example


== Is equal to 10==20 = false
=== Identical (equal and of same type) 10==20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false

JavaScript Bitwise Operators


The bitwise operators perform bitwise operations on operands. The bitwise
operators are as follows:

Operator Description
& Bitwise AND
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
<< Bitwise Left Shift
>> Bitwise Right Shift
>>> Bitwise Right Shift with Zero

41|Page MASTEROFCOMPUTERAPPLICATIONS
JavaScript Logical Operators
The following operators are known as JavaScript logical operators.

Operator Description Example


&& Logical AND (10==20 && 20==33) false
|| Logical OR (10==20 || 20==33) false
! Logical Not !(10==20) true

JavaScript Assignment Operators


The following operators are known as JavaScript assignment operators.

Operator Description
= Assign
+= Add and assign
-= Subtract and assign
*= Multiply and assign
/= Divide and assign
%= Modulus and assign

JavaScript Special Operators


The following operators are known as JavaScript special operators.

Operator Description
(?:) Conditional Operator returns value based on the condition.
, Comma Operator allows multiple expressions to be evaluated
as single statement.
delete Delete Operator deletes a property from the object.
in In Operator checks if object has the given property new
new operator creates an instance (object)
typeof() checks the type of object.

JavaScript If statement
It evaluates the content only if expression is true
42|Page MASTEROFCOMPUTERAPPLICATIONS
Syntax: if(expression){
//content to be evaluated
}
Example:
<html>
<body>
<script> var a=20; if(a>10)
{
document.write("value of a is greater than 10");
}
</script>
</body>
</html>

JavaScript If...else Statement


It evaluates the content whether condition is true of false. Syntax:

if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}

<html>
<body>
<script> var a=20; if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
</body>
</html>
JavaScript If...else if statement
It evaluates the content only if expression is true from several expressions.

43|Page MASTEROFCOMPUTERAPPLICATIONS
Syntax:
if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}

<html>
<body>
<script> var a=20; if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
document.write("a is equal to 15");
}
else if(a==20){
document.write("a is equal to 20");
}
else{
document.write("a is not equal to 10, 15 or 20");
}
</script>
</body>
</html>

JavaScript Switch

44|Page MASTEROFCOMPUTERAPPLICATIONS
The JavaScript switch statement is used to execute one code from multiple
expressions.
Syntax:

switch(expression){
case value1:
code to be executed; break;
case value2:
code to be executed; break;
......

default:
code to be executed if above values are not matched;
}

<!DOCTYPE html>
<html>
<body>
<script>
var grade='B'; var result; switch(grade){ case 'A':
result="A Grade";
break;
case 'B': result="B Grade"; break;
case 'C': result="C Grade"; break;
default:
result="No Grade";
}
document.write(result);
</script>
</body>
</html>

JavaScript Loops

45|Page MASTEROFCOMPUTERAPPLICATIONS
The JavaScript loops are used to iterate the piece of code. It is mostly used
in array.
There are four types of loops in JavaScript.
 for loop
 while loop
 do-while loop
 for-in loop

JavaScript For loop


The JavaScript for loop iterates the elements for the fixed number of times.
It should be used if number of iteration is known. syntax
for (initialization; condition; increment)
{

code to be executed
}

<!DOCTYPE html>
<html>
<body>
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
</body>
</html>

JavaScript while loop


If the condition evaluates to true, the code inside the while loop is
executed.
This process continues until the condition is false.

syntax
while (condition)
{

46|Page MASTEROFCOMPUTERAPPLICATIONS
code to be executed
}

<!DOCTYPE html>
<html>
<body>
<script> var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
</body>
</html>

JavaScript do while loop


 The body of the loop is executed at first. Then the condition is
evaluated.
 If the condition evaluates to true, the body of the loop inside the do
statement is executed again.
 This process continues until the condition evaluates to be false.
 do...while loop is similar to the while loop. The only difference is
that in do…while loop, the body of loop is executed at least once
even if the condition evaluates to be false.
The syntax of do while loop is given below. do{
code to be executed
}while (condition);

<!DOCTYPE html>
<html>
<body>
<script> var i=21; do{

47|Page MASTEROFCOMPUTERAPPLICATIONS
document.write(i + "<br/>"); i++;
}while (i<=25);
</script>
</body>
</html>

JavaScript For In
The JavaScript for in statement loops through the properties of an Object

Syntax
for (key in object) {
// code block to be executed

JavaScript For Of
The JavaScript for of statement loops through the values of an iterable
object.
It lets you loop over iterable data structures such as Arrays, Strings, Maps,
NodeLists

Syntax
for (variable of iterable) {
// code block to be executed
}

JavaScript Array
JavaScript array is an object that represents a collection of similar type of
elements.

There are 3 ways to construct array in JavaScript

 By array literal
 By creating instance of Array directly (using new keyword)
 By using an Array constructor (using new keyword)

48|Page MASTEROFCOMPUTERAPPLICATIONS
JavaScript array literal
The syntax of creating array using array literal
is given below: var arrayname=[value1,value2 valueN];
Example:
<html>
<body>
<script>
var emp=["RAM","SITA"];
for (i=0;i<emp.length;i++){ document.write(emp[i] + "<br/>");
}
</script>
</body>
</html>

JavaScript Array directly (new keyword)


The syntax of creating array directly is given below:
var arrayname=new Array();
Here, new keyword is used to create instance of array. Example:
<html>
<body>
<script>
var i;
var emp = new Array(); emp[0] = "ram";
emp[1] = "sita";
emp[2] = "john";

for (i=0;i<emp.length;i++){ document.write(emp[i] + "<br>");


}
</script>
</body>
</html>

JavaScript array constructor (new keyword)


Here, you need to create instance of array by passing arguments in
constructor so that we don't have to provide value explicitly.
Example:

49|Page MASTEROFCOMPUTERAPPLICATIONS
<html>
<body>
<script>
var emp=new Array("ram","sita"); for (i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>

JavaScript Array Methods


Methods Description
concat():
It returns a new array object that contains two or more merged arrays.

find():
It returns the value of the first element in the given array that satisfies the
specified condition.

findIndex():
It returns the index value of the first element in the given array that
satisfies the specified condition.

slice()
It returns a new array containing the copy of the part of the given array.

sort()
It returns the element of the given array in a sorted order.

50|Page MASTEROFCOMPUTERAPPLICATIONS
pop() It removes and returns the last element of an
array.
push() It adds one or more elements to the end of an
array.
reverse() It reverses the elements of given array.
shift() It removes and returns the first element of an
array.
unshift() It adds one or more elements in the beginning
of the given array.
<!DOCTYPE html>
<html>
<body>

<script>
var arr1=["C","C++","Python"];
var arr2=["Java","JavaScript","Android"]; var arr3=["Ruby","Kotlin"];
var result=arr1.concat(arr2,arr3); document.writeln(result);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<script>
var arr=["AngularJS","Node.js","JQuery"]; document.write("Orginal array:
"+arr+"<br/>"); document.write("Extracted element: "+arr.pop()+"<br/>");
document.write("Remaining elements: "+ arr);
</script>

</body>
</html>

51|Page MASTEROFCOMPUTERAPPLICATIONS
JavaScript String
The JavaScript string is an object that represents a sequence of characters.
There are 2 ways to create string in JavaScript
1. By string literal
2. By string object (using new keyword)

1) By string literal
The string literal is created using double quotes. syntax
var stringname="string value";

<!DOCTYPE html>
<html>
<body>
<script>
var str="welcome to JavaScript"; document.write(str);
</script>
</body>
</html>

2) By string object (using new keyword)


syntax
var stringname=new String("string literal");
Here, new keyword is used to create instance of string.

<!DOCTYPE html>
<html>
<body>
<script>
var stringname=new String("hello javascript "); document
.write(stringname);
</script>
</body>
</html>

52|Page MASTEROFCOMPUTERAPPLICATIONS
JavaScript String Methods
Methods Description
charAt() It provides the char value present at the specified index.
concat() It provides a combination of two or more strings.
substring() It is used to fetch the part of the given string on the basis
of the specified index.
slice() It is used to fetch the part of the given string. It allows us
to assign positive as well negative index.
toLowerCase() It converts the given string into lowercase letter.
toUpperCase() It converts the given string into uppercase letter.

<!DOCTYPE html>
<html>
<body>
<script>
var str="javascript"; document.write(str.charAt(2));
</script>
</body>
</html>

JavaScript Date Object


The JavaScript date object can be used to get year, month and day.
You can display a timer on the webpage by the help of JavaScript date
object

<!DOCTYPE html>
<html>
<body>
<script>
var s=new Date();
document.writeln("Today's day: "+s.getDate());
</script>
</body>
</html>

JavaScript Math
53|Page MASTEROFCOMPUTERAPPLICATIONS
The JavaScript math object provides methods to perform mathematical
operation.
Methods Description
abs() It returns the absolute value of the given number.
max() It returns maximum value of the given numbers.
min() It returns minimum value of the given numbers.
pow() It returns value of base to the power of exponent.
random() It returns random number between 0 (inclusive) and1
(exclusive).
sqrt() It returns the square root of the given number

<!DOCTYPE html>
<html>
<body>
<script> document.write(Math.pow(2,3));
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Math.sqrt(16)+ "<br/>"); document.write(Math.sqrt(25));
</script>
</body>
</html>

54|Page MASTEROFCOMPUTERAPPLICATIONS
What is Function in JavaScript
Function is the set of statement enclosed in a specific block
of code to get required functionality to perform specific task
We create Function:
If we want to repeat a code again and again
If we want to save our time
If we want to perform a specific function
There are two steps to work with function
Create a function
Call that function Creating a function function test(){
document.write(“I am Function”);
}
Calling a function (Invocation)
test()
Syntax
function funcName(){
//write code here
}

<head>
<script>
function test( ){ document.write(“welcome"); document.write(3+3);
}
test(); document.write("<br/>"); function cal( ) {
var a = 32; var b = 12;var c = a + b;
document.write(c)
}
cal()
</script>
</head>
<body>
<h1> functions</h1>
</body>
</html>

55|Page MASTEROFCOMPUTERAPPLICATIONS
<html>
<head>
<title>JavaScript Function Problem 1 </title>
<script>
function cal(num1, num2){ document.
write("num1 = "+num1) document.write("num2 = "+num2)
document.write
("Addition = "+(num1+num2)) document.write("Substraction = "+(num1-
num2))
document.write("Multiplication = "+(num1*num2))
document.write("Division = "+(num1/num2))
document.write("Mod = "+(num1%num2))
}
var a = Number(window.prompt("Enter 1st value"))
var b = Number(window.prompt("Enter 2nd value")) cal(a,b)
</script>
</head>
<body>
<h1>We are learning js</h1>
</body>
</html>

JavaScript RegExp Reference


 A regular expression is a pattern of characters.
 The pattern is used for searching and replacing characters in strings.
 The RegExp Object is a regular expression with added Properties and
Methods.

Syntax
/pattern/modifier(s);

Modifiers

56|Page MASTEROFCOMPUTERAPPLICATIONS
Modifiers are used to perform case-insensitive and global searches:

Modifier Description
g Perform a global match
i Perform case-insensitive matching
m Perform multiline matching

Brackets
Brackets are used to find a range of characters

Expression Description
[abc] Find any character between the brackets [^abc]
Find any character NOT between the brackets
[0-9] Find any character between the brackets (any digit)
[^0-9] Find any character NOT between the brackets (any non-
digit)
(x|y) Find any of the alternatives specified

Metacharacters
Metacharacters are characters with a special meaning:

Metacharacter Description
. Find a single character, except newline or line terminator
\w Find a word character
\W Find a non-word character
\d Find a digit
\D Find a non-digit character
\s Find a whitespace character
\S Find a non-whitespace character

57|Page MASTEROFCOMPUTERAPPLICATIONS
RegExp Object Properties

Property Description
global Checks whether the "g" modifier is set
ignoreCase Checks whether the "i" modifier is set
lastIndex Specifies the index at which to start the next match
multiline Checks whether the "m" modifier is set
source Returns the text of the RegExp pattern

RegExp Object Methods


Method Description
exec() Tests for a match in a string. Returns the first match
test() T ests for a match in a string. Returns true or false
toString() Returns the string value of the regular expression

JavaScript Events
 The change in the state of an object is known as an Event.
 When JavaScript code is included in HTML, javascript react over
these events and allow the execution. This process of reacting over
the events is called Event Handling. Thus, JavaScript handles the
HTML events via Event Handlers.

HTML events and their event handlers are:

58|Page MASTEROFCOMPUTERAPPLICATIONS
<html>
<head>
</head>
<body>
<script>
function mouseoverevent()
{
alert("welcome to js");
}
</script>
<p onmouseover="mouseoverevent()"> hi</p>
</body>
</html>

59|Page MASTEROFCOMPUTERAPPLICATIONS
<html>
<head> </head>
<body>
<script >
function clickevent()
{
document.write("sowmya");
}
</script>
<form>
<input type="button" onclick="clickevent()" value="what is ur
name?"/>
</form>
</body>
</html>

<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded alert
message');">
<script> document.write("welcome");
</script>
</body>
</html>

60|Page MASTEROFCOMPUTERAPPLICATIONS

You might also like