MODULE 2

INTRODUCTION TO CSS
• CSS stands for Cascading Style Sheets. It is a style
sheet language which is used to describe the look and
formatting of a document written in markup language.
• It provides an additional feature to HTML.
• It is generally used with HTML to change the style of
web pages and user interfaces.
• It is a text file with .css extension.
Syntax of CSS
Selector
{
1st property: value
2nd property: value
3rd property: value
.
.

}
Exploring CSS selectors
• Selector is a pattern that is used to select an element to apply the css
style rules.
• Selectors can be used as a condition or a css rule to determine the
elements that match with selector.
• Css rule has two parts:
Selectors
declaration
Types of selectors
• The universal selector
• The type selector
• The class selector
• The id selector
• The child selector
• The descendant selector
• The adjacent sibling selector
• The attribute selector
• The query selector
The Universal selector
• This selector will select all the element that are present in an HTML
document .
• It can be used to apply same rule to all the elements.
• Universal selector is represented by an asterisk symbol (*).
*{}
Example:
*{
Margin : 0;
Padding : 0;
}
Type selector
• This matches all the elements specified in a list with given value to
determine the elements to which the CSS rules are applied.
Example:
h1 , h2 , h3 , p {font family: sans- serif}
Class selector
• Class selector allows you to apply CSS rules to elements that carry
class attribute whose value matches with class attribute specified in
class selector.
• We can use class selector in either 2 ways :
Applying css rule to all the elements that have class attribute of same
value
Applying CSS rule to H1 elements whose class attribute contain intro
as its value.
Example:
<h1 class=“intro”>header</h1>

.intro {font – family : sans-serif }

OR
h1.intro {font – family : sans-serif }
The ID selector
• The value of id attribute is unique within the document.
• So selector is applied only to the content of one element.
<h1 id=“myheader”>hello</h1>
In the above snippet id selector is represented by hash symbol(#) and
followed by the value of id attribute.
#myheader { font-family: sans-serif }
The child selector
• Child selector matches the element that is immediate child of another
element.
• Here greater than symbol(>) is used as the combinator.
TD>B { font-family: sans-serif }

Here B is the immediate child of the TD element. So CSS rules is applied

to all the B elements that are immediate children of TD elements.
The Descendant Selector
• It matches the element that is descendent of another element.
• Descendant element is an element that is nested inside another
element.
• Here white space is used as combinator.
table b {font-family: sans-serif }
Here css is applied to all the b elements that are nested within the table
element
The adjacent Sibling selector
• This selects all the elements that are adjacent siblings of a specified
element.
• Sibling element must have same parent name.
• Adjacent means side by side.
• So no other element could exist between adjacent sibling elements.
• To use adjacent sibling selector, the plus symbol(+) is used as its
combinator.
H2+p {font-family: sans-serif }

<h2>heading</h2>
<p>hello</p>
<p>good afternoon</p>
Here first paragraph matches adjacent sibling selector.
But second paragraph does not match.
The attribute selector
CSS attribute selector selects elements on the basis of some specific
attributes or attribute values.
Name syntax Match
Hyphen selector [attribute|=value] Matches if the element
has an attribute with a
value followed by a
hyphen
Existence Selector [attribute] Matches if the element
has a specific attribute
Equality selector [attribute=value] Matches if element has an
attribute with a specific
value.
Space selector [attribute~=value] Matches if element has
attribute with space
separated items that
match with value
Query selector
• Queryselector() and queryselectorAll() methods accept CSS selectors
as parameters and return the matching element node in the
document tree.
Queryselector ()method helps in quering the entire document or a
specified element of the document.
We can use all CSS selectors with this method as parameters.

queryselectorAll() method returns all the available elements as a

single static collection of elements known as staticNodeList.
Inserting CSS in HTML Document
• Three ways to apply CSS style to HTML document are:
The Internal style sheet
The external style sheet
The in-line style sheet
Internal Style sheet
• It is written within the HEAD element of html document.
• This style will be applied only to the documents in which it is defined
and not referenced by any other web document.
• Syntax:
<style type=“text/css”>
selector
{ }
</style>
External style sheet
• External style sheet is same as that of creating an internal style sheet.
• Here we write a separate text file with .CSS extension and reference
of css file is placed in HTML document.
We can link css file to our web page in following two ways:
• Linking : Refers to HTML Link element.
This has 3 attributes – rel, type and href.
<LINK rel=“stylesheet” type=“text/css” href=“test.css”/>
• Importing : Helps us in accessing the style rules from other CSS style
sheets.
• The @import keyword is used, followed by the URI of style sheet to
which we want to import the style rules.
Syntax:

<style type=“text/css”>
@import url(”myshtylesheet.css”)
H1{color:blue}
</style>
<style type=“text/css”>
@import URI(“mystylesheet.css)
H1 {color:blue}
</style>

In addition to @import rule, the @media rule helps us in applying the style to media
device depending on the type of device a page is displaying.
Some of them Computer screens, printers, television , handhelds, speech synthesizers
and projectors.
<style type=“text/css”>
@media screen
{
Body { font-size:13px}
}
</style>
The Inline Style
• Inline tyle properties are written in single line separated by
semicolon;
• These properties are placed inside style attribute of HTML Element on
which we want to apply.
<p style=“background : blue ; color : red ; border : solid black 1px;”>
Defining inheritance in CSS
• The css properties applied to an element is also inherited by the child
elements of that element.
<div style=“font-family: serif”>
<p> this text is also in serif</p>
</div>
In this case the property applied for div is automatically inherited by
the P element from parent DIV element.
But padding and border properties cannot be inherited.
• Below shows list of attributes that are inherited automatically

properties Description
Border-collapse Represents the border display
Border-spacing Represents the thickness of the border
Caption-side Represents the place of table caption
color Color of text
cursor Represents cursor to be displayed
direction Direction of text.
font Font properties
Empty - cells Specifies whether to Display border and background on empty cells
Font -family Font family of text
Font-stretch Represents text as stretched or condensed.
Font- size Represents the size of text
Font-size-adjust Size of text on the basis of an aspect value.
Font -style Style of text
Font- variant Fonts variant, such as small caps.
Font-weight Represent font as bold.
Letter-spacing Space between characters in a text.
Line-height Height of line
List-style Style of line
List-style-image Represents image as list marker
List style type Type of list marker.
quotes Quotation marks in text
Text-align
Text- indent Indentation of text
Text- transform Transformation of text, such as uppercase , capitalize and lowercase.
White -space Handles space in an element
Word-spacing Represents the spacing between the words in text.
Background and color
Gradients in CSS
• CSS provides various Properties to set the background of a web page.
1) Background- color
2) Background- image
3) Background- repeat
4) Background- attachment
5) Background- position
6) Background- clip
7) Background- origin
8) Background- size
9) Background- quantity
10) Background- spacing
11) Background
Background -color
It takes three values
Color name
Hexadecimal equivalence of color
RGB color value

H1{ background- color: #FFFFFF; }

Other than this it also takes 2 more values , transparent and inherit.
Transparent is default value.
When it is transparent, it does not take or inherit the color of parent
element.
It becomes transparent, so that the background color of parent
element is visible through it.
When it is inherit, it takes or inherits the color of its immediate parent
element.
Background- image property
• Here we can set background image to all the elements.
• It takes two values either URL or none , when no image is used.
Example:
Body { background – image:url(“picture.jpg”);}
P {background –image :none }
Background –repeat property
• It allows us to tile the background images along x and y axis of an
element.
• This property is used only with background-image property.
• It takes either the following :
Repeat –x : tiles image horizontally
Repeat – y: tiles image vertically
Repeat – tiles both horizontally and vertically
No-repeat – does not tile an image
<body style =“background: url(“ “);background-repeat: repeat-y;” >
Background –attachment
property
• It is used to fix or scroll the background image along with the text and
other document content displayed on it.
• It takes either of 2 values: fixed and scroll
• The default value is scroll.
Example
Body { background-image:url(“image.jpg”);background-
attachment:scroll; }
Background position property
• This property sets the position of background image on a web page.
• This is used along with the background – image property.
• Position of image can be set by performing following tasks:
Representing position in pixels
Body { background-image:url(“pic.jpg”);background-position:200px
200px;}
Representing position in percentage
Body { background-image:url(“pic.jpg”);background-position:50% 50%;}
Representing position by words such as left , right , and center for x-
axis, and top, down and center for y-axis.
• Body { background-image:url(“pic.jpg”);background-position:left
bottom;}
 Background clip property
• It is newly introduced to determine whether the background image
extends into border or not.
• It takes either border-box or padding box value.
• When we use border-box, it extends to the border. This is the default
value.
<p style=background-color : red; border-style : dotted double; background-
clip : border-box;”>
• In case of value padding-box, background image does not stretch to
the border.
• Image appears upto the edge of padding.
<p style=background-color : red; border-style : dotted double;
background-clip : padding-box;”>
Background-origin property
• It is used to determine the starting position of the background image
in a box like shape.
• There are three values that can be specified with background-origin
property:
Padding-box:
 specifies the position of background image in relation to the outer
edge of the padding or inner edge of border.
 This is the default property.
Border- box
• Specifies the position of background image in relation to the outer
edge of the border.

Content-box
• Specifies the position of background image in relation to the outer
edge of content or inner edge of the padding.
Background -size property
• We can specify size by using any of the following values:
The auto keyword- sets the image to its original size.
Background-size: auto;

The length parameter: sets an image of specified size in terms of height

and width.
Background-size: 15px;
Background-size: 50px 100px;

Percentage parameter.
Background-size: 50%;
Background- quantity property
• It is used to specify the number of times to repeat an image. It takes
following value:
• The infinite keyword- repeats image infinitely.
Background-quantity : infinite;
• The integer keyword- repeats image specified number of times.
Background-quantity : 5;
Background-spacing property

• It is used to specify the distance between the images that are

repeated in the background of an element.
• It takes the value to specify the horizontal and vertical space, related
to coordinate specified by the background position property.

<body style=“background-image: url(image.jpg); background-

repeat:repeat-x; background-spacing:20px 50px;”>
Note that if we give single value , it takes horizontal and vertical spacing
both.
If we give two values, the first value is horizontal spacing and the
second gives the vertical spacing.
Background property
Background property is the shortcut of specifying several
background properties at the same place in a style sheet.
Body { background:green }-> specifies the color for background.

P { background:url(“image.jpg”)blue 50% repeat fixed } -> specifies

that all properties are specified individually , which includes an
image color, image size, image repetition , and its attachment.
E { background : orange url(“image.jpg”)/100% auto }-> specifies
that both background color and background image are set. In
addition image is stretched to the full width of element.
Exploring color properties
Color name Hexadecimal value RGB value

black #000000 0,0,0

blue #0000ff 0,0,255

Brown #a52a2a 165,42,42

darkblue #00008b 0,0,139

green #008000 0,128,0

Refer text book for further

Opacity property
• It is used to produce transparency effect in html element.
Opacity: [number between 0-1]
RGBA value format
• This takes 4 arguments in which first three is same as RGB format,
while the fourth is alpha channel.
• Alpha channel specifies the transparency or opacity level of specified
color.
• It takes number between 0 and 1 .

H1 background-color: RGBA(153,134,117,0.3); }
Exploring gradient properties
Syntax
Linear-gradient(pos,#AAA B, #XXX Y);
Pos-position of first color, which gives direction.
#AAA – specifies the primary color.
B – specifies Percentage rom where the fade begins.
#XXX- specifies secondary color.
Y – specifies percentage from where the fade begins
Font and text styles
Font properties
• Font-family
• Font-size
• Font-size-adjust
• Font-stretch
• Font-style
• Font –variant
• Font-weight
• font
 Font-family
Fonts are categorized under Different font families:
Serif
sans-serif
Cursive
Fantasy
monospace

Body {
Font-family : sans serif;
}
Font-size property
• Font-size can be specified in following three different ways
Using absolute value.
Using relative values
Using a percentage value
Absolute values refers to the
• XX-small
• x-small
• Small
• Medium
• Large
• X-large
• Xx-large
• large
Font-size-adjust property
• It is used to change aspect value of text on web page.
• It is the ratio between the font height of lowercase letter and actual
height of font.
p{
Font-size-adjust:0.5;
}
Font-stretch property
It is used to change the width of font.

Values used are:

• Ultra-condensed
• Extra-condensed p { font-stretch :condensed; }
• Semi-condensed
• Normal
• Semi-expanded
• Expanded
• Extra-expanded
• Ultra-expanded
Font-style property

• Used to specify the style of font.

• Possible value are normal, italics and oblique.
P { font-style : italics; }

Font-variant property
• Used to display the font as normal or in
small caps
Font-weight
• Used to specify weight of font, such as boldness or thickness.
• Possible values for font-weight are lighter, normal, bold, bolder and
numbers from 100-900.

Font property
Instead of defining all the properties separately , we can specify the
values of all these properties in font property.
P { font: bold italic 30px verdana ; }
Web font
• Web font allows us to write text in fonts other than those present in
our system.
• Syntax:
@font-face {
font-family: <name>
src : <source>
}
Using text-transform property
Text transform is used to transform text to uppercase , lowercase or
capitalized letters.
• <li><p style=“text-transform: capitalize”>my paragraph<p></li>
• <li><p style=“text-transform: lowercase”>my paragraph<p></li>
• <li><p style=“text-transform: uppercase”>my paragraph<p></li>
• <li><p style=“text-transform: none”>my paragraph<p></li>
Using text- indent property
• It is used to change the indentation of the text in a web page.

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-indent: 50px;
text-indent: 2cm;
text-indent: 30%;
}
Using text decoration property
• It is used to decorate text by applying underline, overline, strikeouts,
and blinking effects.

• <p style=“text-decoration:none;”>property is set</p>

• <p style=“text-decoration:underline;”>property is set</p>
• <p style=“text-decoration:overline;”>property is set</p>
• <p style=“text-decoration:line-through;”>property is set</p>
Using text- shadow property
• It is used to display the shadow of text in a web page.
<head>
<style>
p{text-shadow:#ff0000 12px -12px 2px;}
</style>
</head>
Body
<p style=“font-size:30px;”>
</body>
Using text-stroke property
• It is used to display or highlight the outline of a text in a web page.
<style>
body{
text-align: center;
}
.jtp {
color: white;
font-size: 50px;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: red;
}
</style>
Creating Boxes and
columns using CSS
• CSS treats HTML document as a hierarchical tree of elements.
• Box model determines how html elements are displayed as boxes.
• Content area:
Displays the content of a document. This area is bounded by rectangle
which is called as the content edge.

Padding area:
It specifies the area around content area. This is bounded by padding
edge. The padding is transparent

Border area:
A border that goes around the padding and content.

Margin area: specifies the area around border area. Clears an area
outside the border. The margin is transparent
Box model has following types:
• Block-level box: represents a box to show paragraph
• Line-box : represents a box to show a line of text.
• Inline-level box : represents a box to show the words of a line

Various other aspects of box model

Box dimensions
The padding properties
The margin properties
The width and height properties
The min-width, max-width, min-height and max-height properties
Floating boxes
Overflow of box content
The marque properties

Box Dimensions
Dimensions of the box model are calculated by height and width of the
content area that gets applied to the element

Padding properties:
Padding(space) in box model specifies the distance between the border
of an element and the content within it.
Padding is effected by the background color of an element.
The shorthand property in padding is used to change all the padding
properties such as padding-top, padding-bottom, padding right and
padding-left.
The syntax to set padding properties is
Padding : value;

Padding can be set according to following values:

• Length
• Percentage
• Auto

Padding properties in box model

#container {
Padding-top:7px;
Padding-left: 25%
Padding-right :auto
Padding- bottom
Border: 2px solid 0000000
}
• Padding property is used to set values for all four directions in box
layout model.
• If the padding property has only one value , then it is applied equally
on all four paddings
• If the padding has two values, the first value is applied to the top and
bottom padding , and the second is applied for right and left padding.
• If the padding has 3 values , the first is for top , second is for right and
left and third is for bottom padding.
• If it has 4 values, then it is top , right, bottom and left
Exploring border properties
• Border specifies a space between the padding and content box
model.
• The syntax to set border is
Border 1px double value;
Border has following properties:
• Border-width
• Border- color
• Border-style
• Border-shorthand
• Border-radius
• border-image
• Border-shadow
Border-width property

• Width is specified in the pixel.

Syntax:
Border-width: value;

Border can have either of following values:

• Thin
• Medium
• Thick
• Length
• Inherit
Width of different sides of border is set with following properties:

Border-top-width property
Border-right-width property
Border-bottom-width property
Border-left-width property
Border-width shorthand property
Border-color property
• It specifies the color of the border.
Border colors are defined using following values:
Name
RGB values
Hexadecimal values

Border-color: value;
Border-color uses different properties for each side, such as
• Border-top-color
• Border-right-color
• Border-bottom-color
• Border-left-color
All the properties takes the following values:
Inherit
Transparent
color
Border-style property
• It indicates the format of the border such as solid, dashed, double.
Syntax:
Border-style: value;
Value used are none, hidden, dotted, dashed, solid, double, groove,
ridge, inset and outset .
Border-style property can be used with four directions
Border-top-style
Border-right-style
Border-bottom-style
Border-left-style
Border-style shorthand
Exploring margin property
Blank area around the border of an element is called margin.
Used to create extra space around the element.
P{
Margin :value;
}
CSS has properties for specifying the margin for each side of an element:

margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:

auto - the browser calculates the margin

length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent
element
Exploring width and height
properties
• Width: <length> or <percentage> or <auto>;
• Height: <length> or <percentage> or <auto>;

• P { width:100px; height: 50px; }

Exploring min-width, max-width,
min-height, max-height
• P { min-width:10px; max-width:100px; min-height: 10px; max-
height:100px; }
Floating Boxes
• A floating box that can display the content of an element in left or
right direction with respect to content of another element.
• Syntax:
Float: left | right | none |

Example:
Img { float : left; }
Overflowing of Box Content
• CSS provide various overflow properties to restrict the overflow of
content in an element.
• Overflow properties of CSS

Overflow-x Specifies clipping at left and right edges

Overflow-y Specifies clipping at top and bottom
Overflow-style Specifies scrolling method for elements
that overflow.
Syntax
overflow - x: visible /hidden/scroll/ auto/no-display/ no –content;
Overflow- style: auto |[scrollbar | panner | move | marquee]

Here :
visible: - indicates that content is not clipped.
Hidden: - indicates that the content is clipped and that no scrolling mechanism should
be provided to view content outside the clipping region
Scroll:- indicates that content is clipped and scrolling mechanism should be displayed
for a box
Auto:- indicates that scrolling mechanism has to be provided to a box, because the
content of this box overflows from its content area.
No-display:- indicates that if the content doesnot fit in the content box, the box is
removed completely.
No-content :- indicates that if the content does not fit in the content box, content is
hidden completely.
Exploring Marquee properties
• Properties that produce marquee effects are:
Marquee-style : it specifies a style to move the content of an element.
Syntax:
marquee-style : scroll | slide | alternate;
Scroll: specifies the moving style in which the element starts moving
from one side , scrolls all the way across and then stops.
Slide: specifies the moving style in which the element starts moving
from one side , scrolls in and stops if no more content available.
Alternate : specifies the moving style in which element starts moving
from both sides alternatively.
• Marquee – loop : determines how often the content moves.
marquee-loop: <non-negative-integer> | infinite ;

• Marquee-direction : specifies the initial direction in which content will

move.
marquee-direction : forward | reverse;

• Marquee- speed: specifies how fast content scrolls.

Marquee-speed : slow | normal | fast;

• Marquee- shorthand: specifies the shorthand to specify marquee-

style, marquee- direction , marquee-speed properties.
Rotating Boxes
• It allows us to rotate the content of HTML element by using rotation
and rotation-points properties.
Syntax:
rotation : <angle>
• Rotation-point property defines a point as an offset from the top left
border edge.
Syntax:
rotation-point : <bg-position>
H1 {
rotate : 45deg;
rotate-point : bottom left;

}
Exploring the Line Box Model
• It is used to enhance the box model.
• It helps to display elements and text in line with each other.
• It enables us to display first line of an element in specified format or
to display the first character of an element in big font size.
Introduction to
Javascript
Features of javascript:
• Imperactive and structured
• Dynamic text
• Functional
• Prototype based
• Platform independent
Using Javascript in HTML Document
• Script element is used to insert javascript in HTML document.
• When the script element is loaded in browser, it process the content
enclosed with script as Javascript.
• Attributes:
•
We can use javascript in a webpage in following 3 ways:
• In the head element
• In the body element
• As an external script file

In the head element

<head>
<Script type=“text/javascript”>
Type here
</script>
• In the body element
<body>
<script type=“text/javascript”>
Type here
</script>
</body>

As an external script file

<head>
<Script src=url>
Type here
</script>
</head>
Programming Fundamentals of
JavaScript
• Lexical structure
• Variables
• Operators
• Control flow statements
• Popup Boxes
Lexical structure
• It provides set of rules to write programs.
• Character sets
• Case sensitivity
• White spaces and line breaks
• Optional semicolons
• Comments
• Literals
• Identifiers
• Reserved words
Character sets
Symbols Names
\t Represents tab
\f Represents a form feed, which is also referred as whitespaces
\b Represents a backspace
\n Represents a newline
\r Represents a carriage return character, which is used to start a new line of text.
\” Represents a double quote
\’ Represents a single quote.
\\ Represents a backslash
Understanding Case Sensitivity
• It is case-sensitivity language, which means that keywords, variable
names , function name and identifiers should be typed with a
consistent casing of letters.
• For example:
In Javascript function is a keyword which must always be written in
lowercase.
• Javascript interpreter ignores tabs, space and newlines that appear in
a program , except strings and regular expressions.
• It is not necessary to use the semicolon at the end of the statement.
• Single line comment –starts with // and ends with the end of line
• Multi line comment – starts with /* and ends with */
Exploring variables
• Syntax: var variable_name;
Example:
Exploring operators
Control Flow Statement
• Selection statements
• Loops
• Jump statements

Selection statements
If
If-else
switch
 The if Statement
Syntax
• if (condition)
{
statements

}
Note that if is in lowercase letters. Uppercase letters (If or IF) will
generate a JavaScript error.
If else statement
If(condition)
{
Statement1
}
Else
{
statement2
}
Switch statement
Syntax:
Switch(expression)
{
Case value1: statement1
break;
Case value2: statement2
break;
Default: default_statement
break
Loop statements
• While
• Do while
• For loop
Jump statements
• Break statement
• Continue statement
Exploring Popup boxes
It is a window that displays message along with ok button ,cancel
button and in addition it also prompt user to enter some text.
• The alert box
• The Confirm box
• The Prompt Box
 The alert box
• It is used to display an alert message and also to display error message after we
validate a form.
• Alert box has OK button which the user has to click to continue with execution.

The confirm Box

It is used to display message as well as return a value.
It displays a box with 2 buttons, OK and CANCEL .
When we click OK it returns true value and when we click CANCEL button, it
returns false value.

The Prompt Box

it is used to input a value from a user.
Element Access
• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections
1)Users can use getElementById() method to access the HTML element using the id. If any
element doesn’t exist with the passed id into the getElementById method, it returns the null
value.
document.getElementById(element_ID);
……………………………………………………………………………………………………………………………….
2)Get HTML element by className
This selects the element from the class name. We can provide a class name to each element in
HTML and then access the same using that class name. In this we are going to use the method
getElementsByClassName() to get and update the element .
document.getElementsByClassName(classnames);
……………………………………………………………………………………………………………………….
3) Get HTML element by Name
we can access elements by using the getElementsByName() method. It helps the user to get an
element with the help of a name. The name here is the attribute name of the HTML element.
document.getElementsByName(element_name);
4)Get HTML elements by TagName
In JavaScript, we can use the getElementsByTagName() method to access all the elements with
the given tag name. In JavaScript, we can use the getElementsByTagName() method to access
all the elements with the given tag name.
document.getElementsByTagName(Tag_name);
…………………………………………………………………………………………………………………………….
5) Get HTML elements by CSS Selector
HTML elements can be retrieved using CSS selectors in two ways. The querySelector() method
returns the first element that matches the particular CSS selector. The querySelectorAll()
method returns all element that matches the particular CSS selector.
document.querySelector(selectors);
document.querySelectorAll(selectors);
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1 id="A">
Welcome to VCET
</h1>
<p>getElementById() Method</p>
<script>
let temp = document.getElementById("A");
console.log(temp);
console.log(temp.innerHTML);
</script>
</body>
</html>
Exploring Functions
Function with parameters :
• it doesn’t contain parameters.
• Code written in these function is static.

Function without parameters:

• It contains parameters in its parenthesis, such as string and integer.
• Built in Global functions
Function Description
alert() Error message
prompt() To take user input
confirm() This function returns some value
eval() Evaluates and executes a string and returns a result.
IsFinite() Returns Boolean value, true or false, indicating whether the argument passed to it is
finite or infinite;
isNaN() Not a number.
Determines whether or not a value is an illegal number
parseInt() Extract a number from beginning of a string.
This function parses the string and returns the first integer value found in the string.
parseFloat() Extract a number from beginning of a string.
This function parses the string and returns the first floating point value found in the
string.
Number() Converts a value of an object into a number.
If object contains Boolean value, then it return 1 for true ad 0 for false
escape() Encodes a string
unescape() Decodes a string that is encoded by escape function
Defining Function
function function_name(parameters…)
{
Block of code
}

invoking Function :
function_name(parameters……)

Defining Function aguments

function_name(arg1,arg2……agrn)
Defining return function
• It specifies a value that is returned from a function.
Syntax:
return value;
Calling Functions with Timer

It Is used to execute javascript functions after specified period.

Some of the javascript methods are:
1)The setTimeout() method
setTimeout(function, delayTime)
Here function specifies method that timer calls and delayTime specifies
number of milliseconds to wait before calling method.

2)The ClearTimeout() method:

clearTimeout(timer)
It deactivates or cancels the timer that is set using this method.
Here timer is a variable created.
3) The setInterval() method:
It executes a function after a specified time interval.
setInterval(function, intervalTime)
Here intervalTime specifies the time interval between the function calls

4) The clearInterval() method:

It Deactivates or cancels the timer that is set using setInterval()
method.
clearInterval(timer)
Exploring Events
• Events refer to actions that are detected by a programming language
when you perform particular task.
• Events are handled by a special function known as Event handler,
which handles a particular event when the event is triggered.
Syntax to create an event handler:
onEvent= “code to handle”
Events of HTML Forms

event Description
onsubmit Triggers on submitting form
onselect Triggers on selecting an element
oninvalid Triggers when an element is invalid
oninput Triggers when input is provided for an element
onforminput Triggers when input is provided on a form
onformchange Triggers when a form changes
onfocus Triggers when a window gets focus
oncontextmenu Triggers when context menu is used
onchange Triggers when an element changes
onblur Triggers when a window loses focus
Keyboard Events
Events Description
onkeydown Triggers on pressing a key
onkeypress Triggers when a key is pressed
onkeyup Triggers on releasing a key

Mouse events
Events Description
onclick tiggers
ondblclick
Arrays in JavaScript
• A JavaScript array has the following characteristics:
1.First, an array can hold values of mixed types. For
example, you can have an array that stores elements
with the types number, string, boolean, and null.
2.Second, the size of an array is dynamic and auto-
growing. In other words, you don’t need to specify the
array size up front.
Creating JavaScript arrays
• JavaScript provides you with two ways to create an array. The first one
Is to use the Array constructor as follows:
let scores = new Array();
let scores = Array(10);

To create an array and initialize it with some elements, you pass the
elements as a comma-separated list into the Array() constructor.
let scores = new Array(9,10,8,7,6);
let colors = ['red', 'green', 'blue'];
• To access an element in an array, you specify an index in the square
brackets []
let mountains = ['Everest', 'Fuji', 'Nanga Parbat’];
console.log(mountains[0]);
console.log(mountains[1]);
console.log(mountains[2]);