DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CST463 - WEB PROGRAMMING

1 November 2022
CST463 - WEB PROGRAMMING

St . Joseph’s College of Engineering and Technology, Palai

Page 2
 Module 2 (CO2, Cognitive Knowledge Level: Apply)

► (CSS, JavaScript) Introduction to Stylesheets : Introduction to CSS-Basic

syntax and structure-Inline Styles, Embedded Style Sheets, Conflict
Resolution, Linking External Style Sheets-Exploring CSS Selectors-
Properties, values, Positioning Elements: Absolute Positioning, Relative
Positioning - Backgrounds-List Styles-Element Dimensions- Table Layouts-
Box Model and Text Flow-div and span -Basics of Responsive CSS, Media
port & Media Queries.
► Introduction to JavaScript : Introduction to Scripting- Programming
fundamentals of JavaScript -Obtaining User Input with prompt Dialogs-
Arithmetic-Decision Making -Control Statements - Functions -Arrays -
Objects -Document Object Model (DOM) -Form processing

Page 3
 Introduction to Stylesheets

Page 4
 Introduction to CSS3
► Cascading Style Sheets 3 (CSS3) that allows you to specify the presentation
of elements on a web page (e.g., fonts, spacing, sizes, colors, positioning)
separately from the document’s structure and content (section headers,
body text, links, etc.).
► CSS is a set of rules for displaying markup [Link] made the Separation
of structure from presentation
► multiple style sheets can be applied to the same Web page
► Same style sheet can be applied to the multiple Web page
► Cascading:
► Display rules “cascade” down
► The most specific rule is used
► Styles Sheet:
► Rules are created as styles
Page 5 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Advantages of CSS3
► Saves time
► Easy to change
► Keep consistency(always behave in
the same way)
► more control over layout
► Use styles with JavaScript => DHTML
► create a common format for all the
Web pages

Page 6 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Types of CSS
► Inline style sheet
► The style properties are added within
the HTML tag itself
► Embedded style sheet
► The set of style properties are
embedded within the HTML document
► External style sheet
► Common set of style properties are
applied to all the web pages from an
external .css file.

Page 7 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Order of Precedence of Style Sheet
► Inline style sheets(lowest level)
► Embedded/Document Level sheets
► External style sheets(highest Level)
► Inline Style sheets have precedence over document style sheets which have precedence
over external style sheet.
► When using multiple styles that conflict, which will be displayed?
► Order:
► Inline style sheet
► Embedded style sheet
► External style sheet
► Browser default

Page 8 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Style Specification Format

► Inline Style
Style=“property0:value0;property1:value1;
………
propertyZ:valueZ;”
► Document Level
<style type=“text/css”>
rule_list
</style>
► Each style rule in a rule list has two parts
► Selector—the tag or tags affected by the rule.
► List of property/value pairs
► Selector { property_1: value_1; property_2: value_2:… property_n: value_n;}
Page 9 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Style Specification Format

► External Style sheet

<link href=URL rel=“relation_type” type=“link_type”>
► URL is the [Link]
► Relation_type=“stylesheet”
► Link_type=“text/css”
► Do not include <style> tags
► Save the document as [Link]

Page 10 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Inline styles

► Add styles to each tag within the HTML file

► Use it when you need to format just a single section in a web page
► style information is directly attached to the HTML elements they affect
► Attribute style,followed by a colon and a value
► <h1 style=“color:red; font-family: sans-sarif”>India is my country</h1>

Page 11 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Inline styles

Page 12 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Inline styles

► Attribute style specifies an element’s style. Each

CSS property (font-size in this case) is followed
by a colon and a value. the two properties,
font-size and color are separated by a
semicolon.
► set the given paragraph’s color to deepskyblue.
Hexadecimal codes may be used in place of
color names.
► Figure contains the HTML standard color set.
► A complete list of HTML standard and extended
colors at [Link]/TR/ css3-color/

Page 13 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Embedded / internal/Document level

► A style is applied to the entire HTML [Link] it when you need to modify all
instances of particular element (e.g., h1) in a web page
► Example
<style type=“text/css”>
h1 {color:red; font-size:20;font-family:monospace}
</style>
<head>
<title>Embedded Example</title>
<style type=“text/css”>
Style declarations
</style>
</head>

Page 14 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Embedded / internal/Document level

Page 15 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Embedded / internal/Document level

► Styles placed in the head apply to matching

elements wherever they appear in the body.
► The style element’s type attribute specifies
the MIME (Multipurpose Internet Mail
Extensions) type that describes the style
element’s content.
► CSS documents use the MIME type text/css

Page 16 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 External style sheets
► Style sheets are a convenient way to create a document with a uniform theme.
► With external style sheets (i.e., separate documents that contain only CSS rules), you
can provide a uniform look and feel to an entire website (or to a portion of one).
► You can also reuse the same external style sheet across multiple websites.
► Different pages on a site can all use the same style sheet. When changes to the
styles are required, you need to modify only a single CSS file to make style changes
across all the pages that use those styles. This concept is sometimes known as
skinning.
► While embedded style sheets separate content from presentation, both are still
contained in a single file, preventing a web designer and a content author from
conveniently working in parallel.
► External style sheets solve this problem by separating the content and style into
separate files
Page 17 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 External style sheets
► An external style sheet is a .css file containing ► Creating an External Style Sheet
the style definition (declaration) ► Open a new blank document in Notepad
► Use it when you need to control the style for an ► Type style declarations
entire web site h1 {color:red; font-family:sans-serif;}
► Do not include <style> tags
► Example
► Save the document as [Link]
► h1, h2, h3, h4, h5, h6 {color : red; font-family : ► Linking to Style Sheets
sans-serif} ► Open an HTML file
► Save this in a new document using a .css ► Between <head> and </head> add
extension <link href=URL rel=“relation_type” type=“link_type”>
► URL is the [Link]
► Relation_type=“stylesheet” and Link_type=“text/css”
► Save this file and the .css file in the same web server
directory

Page 18 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Linking External style sheets

Page 19 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Linking External style sheets

Page 20 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Conflict Resolution

Page 21
 Conflicting styles
► Styles may be defined by a user, an author or a user agent.
► A user is a person viewing your web page, you’re the author—the person who
writes the document—and the user agent is the program used to render and display
the document (e.g., a web browser).
► Styles cascade (and hence the term “Cascading Style Sheets”), or flow together, such
that the ultimate appearance of elements on a page results from combining styles
defined in several ways.
► Styles defined by the user take precedence over styles defined by the user agent.
► Styles defined by authors take precedence over styles defined by the user.
► Most styles defined for parent elements are also inherited by child (nested) elements

Page 22 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Conflict resolution
► There are certain properties that you don’t want to be inherited.
► For example, the background-image property allows you to set an image as the
background of an element.
► If the body element is assigned a background image, we don’t want the same image
to be in the background of every element in the body of our page. Instead, the
background-image property of all child elements retains its default value of none.
► There are some rules for resolving conflicts between styles defined for elements and
styles inherited from parent and ancestor elements
► Properties defined for child and descendant elements have a higher specificity than
properties defined for parent and ancestor elements.
► Conflicts are resolved in favor of properties with a higher specificity, so the child’s
styles take precedence

Page 23 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Style Sheets-Exploring CSS Selectors

Page 25
 Exploring CSS Selectors
► CSS selectors are used to "find" (or select) the HTML elements you want to style.
► There are six different selector forms
► Simple selector

► Class selector

► Generic selector

► Id selector

► Universal selector

► Pseudo classes

Page 26 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Exploring CSS Selectors- Simple selector
► Simple selector form is a list of style rules, and property values in the rule apply to all
occurrences of the all of the named element
► The selector is a tag name or a list of tag names, separated by commas
► Ex) h1, h3 { font-size: 24pt ;}
h2 { font-size: 20pt ;}
► Contextual selectors: Selectors can also specify that the style should apply only to
elements in certain positions in the document
► Ex) selector applies its style to the content of italic elements that are descendants of
bold elements in the body of the document.
body b i {font-size: 24pt ;}
► Also called as descendant selectors.

Page 27 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Exploring CSS Selectors- class selector
► Used to allow different occurrences of the same tag to use different style
specifications.
► HTML and XHTML require each id be unique– therefore an id value can only be used once in
a document.
► You can mark a group of elements with a common identifier using the class attribute.
<element class=“class”> … </element>
► A style class has a name, which is attached to the tag‘s name with a period.
[Link]{property-value list}
[Link] {property-value list}
<p class = “ques"> What is WWW?</p>
<p class = “ans"> WWW is World wide web,an information repository which can
be accessed over internet</p>

Page 28 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Exploring CSS Selectors- class selector -Example
<!DOCTYPE html>
<html lang = ″en″> <head> <title> sjc</title> <meta charset = ″utf-8″ />
<style type = "text/css">
[Link] {font-family: Times; font-size: 14pt; width: 800px}
[Link] { position: absolute;top: 125px; left: 50px; font-family: Times; font-size: 24pt; font-style: italic; width:
500px}
</style> </head> <body>
<p class = "abstext"> APPLES ARE GOOD FOR YOU </p>
<p class = "regtext"> Apple is the common name for any tree of the genus Malus, of the family Rosaceae. Apple
trees grow in any of the temperate areas of the world. Some apple blossoms are white, but most have stripes or
tints of rose. Some apple blossoms are bright red. Apples have a firm and fleshy structure that grows from the
blossom. The colors of apples range from green to very dark red. The wood of apple trees is fine-grained and
hard. </p>
<p class = "abstext"> ORANGES ARE GOOD IN SUMMER </p>
<p class = "regtext"> Oranges the common name for any tree of Orange. trees grow in any of the temperate
areas of the world. Some orangaes blossoms are white, but most have stripes or tints of rose. </p>
</body>
</html>

Page 29 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Generic Selector

► A generic class can be defined if you want a style to apply to more than one
kind of tag.
► A generic class must be named, and the name must begin with a period
without a tag
► Example: .really-big { … }

<h1 class = "really-big"> SJCET ADMISSION</h1>...

<p class = "really-big"> SJCET BTECH ADMISSION 2022… </p>
<h2 class = "really-big"> SJCET BHRM ADMISSION 2022… </h2>
<h3 class = "really-big"> SJCET PG ADMISSION 2022… </h3>

Page 30 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Generic Selector
<!DOCTYPE html><html lang = ″en″>
<head> <title> sjc</title> <meta charset = ″utf-8″ />
<style type = "text/css">
.regtext {font-family: Times; font-size: 14pt; width: 800px}
.admstext { position: absolute;top: 125px; left: 50px; font-family: Times; font-size: 24pt; font-style: italic; width: 500px}
</style>
</head>
<body>
<h1 class = “admstext"> SJCET ADMISSION</h1>.
<p class = "regtext">SJCET structure that grows from the blossom. Minority catholic institution .provides Btech
and MTECh courses</p>
<p class = “admstext"> SJCET BTECH ADMISSION 2022… </p>
<p class = "regtext">SJHMCT hotel management institution . Minority catholic institution .provides BHRM
courses</p>
<h2 class = “admstext"> SJCET BHRM ADMISSION 2022… </h2>
<h3 class = “admstext"> SJCET PG ADMISSION 2022… </h3>
<p class = "admstext"> PG courses MTECH,MBA,MTECH available at SJCET</p>
</body> </html>

Page 31 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Id Selector
► An id selector allow the application of a style to one specific element.
► Style specified in the id selector applies to the element with the given id.

► To create an ID for a specific tag, use the property:

<tag id=“id_name”>
► To apply a style to a specific ID, use:

#id_name {style attributes and values}

► The general form of an id selector is as follows :

#specific-id {property-value list}

Example:
#section14 {font-size: 20} specifies a font size of 20 points to the element
<h2 id =“section14”> Alice in wonderland</h2>

Page 32 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Id Selector

Page 33 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Universal Selector
► The universal selector, denoted by an asterisk(*), which applies style to all
elements in the document.
► For example:
*{color: red;}
makes all elements in the document red. Is not often useful.

Page 34 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Pseudo Classes
► A pseudo-class is used to define a special state of an element.
► For example, it can be used to:
► Style an element when a user moves the mouse over it
► Style visited and unvisited links differently
► Style an element when it gets focus
► Pseudo classes are styles that apply when something happens, dynamically
instead of simply displaying the target element
► Names of pseudo classes begin with colons hover classes apply when the
mouse cursor is over the element focus classes apply when an element has focus
i.e. the mouse cursor is over the element and the left mouse button is clicked
► These two pseudo classes are supported by FX2 but IE7 supports only hover

Page 35 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Pseudo classes

<html >
<head> <title> Style for Input Type Text </title>
<style type = "text/css">
input:hover {color: red;border-top:dotted;}
input:focus {color: green;border-color:yellow;}
</style>
</head>
<body>
<form action = "">
<p> Your name: <input type = "text" /> </p>
</form>
</body>
</html>

Page 36 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Anchor Pseudo Classes

► Links can be displayed in different ways.

► We can modify the way hyperlinks appear
by creating style rules modifying the <a>
tag with the following “pseudo-classes”:
► link
► visited
► hover
► active

a:link {color:#0000ff}
a:visited {color: #00ff00}
a:hover {color:fuschia; font-weight:bold}
a:active {font-size:30pt}

Page 37 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Anchor Pseudo Classes

Page 38 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 CSS Properties - values
► CSS properties are the styles used on specified selectors.
► They are written before values in the CSS ruleset and are separated from property
values by a colon.
► Different HTML selectors and elements have different properties.
► Some properties are universal and can be used on every selector.
► Others work only on specific selectors and under particular conditions
► There are many properties and their values for HTML selectors.
► There are 520 distinct property names from 66 technical reports and 66 editor's drafts.
► These properties are common because they are frequently used in all CSS
documents and can be applied to different selectors.
► One unique thing about properties is that they have more than one value attached
to them.
Page 39 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 CSS Property
► CSS properties are the styles used on specified selectors.
► five common properties to work with
► List properties
► Font properties
► Border properties
► Text properties
► Color Properties
► CSS VALUES
► Values are written immediately after the colon that separates them from CSS
properties.
► CSS values aren't just text; they come in different forms
► Text
► URLs, units, measurements, integers, strings, inherit, auto, none, etc.

Page 40 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 CSS VALUES
► Values are written immediately after the colon that separates them from CSS
properties.
► CSS values aren't just text; they come in different forms
► Keywords property values are used when there are only a few possible values and
they are predefined (not case sensitive)
► Eg: small, large, medium.
► Number values can be integer or sequence of digits with decimal points and a + or
– sign.
► Length value are specified as number values that are followed immediately by a
two character abbreviation of a unit name.
► There can be no space between the number and the unit name.
px for pixels, pt for points, pc for picas (12 points) , in for inches, cm for centimeters,
mm for millimeters,
Page 41 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 CSS VALUES
► Percentage - just a number followed immediately by a percent sign: eg: font size
set to 85% means new font size will be 85% of the previous font size value.

► URL values: URL property values use a form that is slightly different from
references to URLs in links.
► url(protocol://server/pathname)

► No space should be left between URL and the left parenthesis.

► Colors : Color name rgb(n1, n2, n3).

Hex form: #B0E0E6 stands for powder blue color.

Page 42 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-TEXT properties

Page 43 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-Border properties

Page 44 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-Font properties

► The font-family property is used to specify a list of font [Link] browser will use the first font in the list that it
supports.
► font-family: Arial, Helvetica, Courier
► Generic fonts: They can be specified as the font family value for example :serif, sans-serif, cursive, fantasy, and
monospace (defined in CSS).
► If a font name that has more than one word, it should be single-quoted Eg: font-family: ‘Times New Roman‘

Page 45 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-Font properties

► Font Shorthand
► If more than one font property is to be specified than the values may be stated in a list as the value of the
font property .
Eg: font: bold 24pt ‘Times New Roman‘ Palatino Helvetica
► The order which browser follows is last must be font name, second last font size and then the font style,
font variant and font weight etc can be in any order but before the font size and names.
► Font-size -Possible values: a length number or a name, such as smaller, xx-large, medium , large etc.
► Font-variant -The default value of the font-variant property is normal, can be set to small-caps to specify
small capital characters.
► Font-style -The property is most commonly used to specify italic,
► Font-weight -The property is used to specify the degree of boldness.
► Text Decoration-line-through , overline , underline, none
► Text Spacing: letter spacing , word spacing , line-height

Page 46 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-List properties

Page 47 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-List properties

► It is used to specify style of bullets or sequencing values in list items.

► The list-style-type of Unordered lists can be set to disc,circle,square or none.

► Bullet can be a disc (default), a square, or a circle

<li style = "list-style-type: circle">BTECH </li>

► Could use an image for the bullets in an unordered list.

► Example:

<li style = "list-style-image: url([Link])">

Page 48 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-List properties

► When ordered lists are nested, it is best to use different kinds of sequence
values for the different levels of nesting
► Decimal Arabic numerals 1, 2, 3, 4

► upper-alpha Uc letters A, B, C, D

► lower-alpha Lc letters a, b, c, d

► upper-roman Uc Roman I, II, III, IV

► lower-roman Lc Roman i, ii, iii, iv

<style type = "text/css">

ol {list-style-type: upper-roman;}
ol ol {list-style-type: upper-alpha;}
ol ol ol {list-style-type: decimal;}
</style>
Page 49 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-color properties

► color –specify the foreground color of html elements

color:red
► background-color→set the background color of an element
background-color:grey
► Web Palette contains , one of 16 million different colors
► A set of 16 generic colors that are guaranteed to be displayable
► Names for some:
► blue, red, green, pink
► Hexadecimal
► #0000FF, #FF0000, #00FF00, #FF3399
► RGB
► rgb(0,0,255), rgb(255,0,0), rgb(0,255,0)
► RGB%
► rgb(0%,0%,100%), rgb(100%,0%,0%)

Page 50 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-other properties

[Link]-align property has the possible values, left (the default), center, right, or
justify.
► we want text to flow around another element - the float property.

2. float property has the possible values, left, right, and none (the default).
► Float property is used to specify that text should flow around some element.

3. text-indent property used to indent the first line of a paragraph

Page 51 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-Background

► CSS provides control over the backgrounds of block-level elements.

► CSS can set a background color or add background images to HTML5 element

► background-color→set the background color of an element

background-color:grey

► The background-image property is used to place an image in the background of an element

Repetition can be controlled.

► Background image can be replicated to fill the area of the element. This is known as tiling.

background-repeat property possible values:repeat (default), no-repeat, repeat-x, or repeat-y

background-position property. Possible values: top, center, bottom, left, or right.

Page 52 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-Example

<html><head> <title> sjc</title><meta charset = “utf-8” />

<style type = "text/css">
body { background-color:grey;background-image:url("[Link]");background-repeat:repeat-y;
background-position:center; }
Img {float:left; }
</style> </head>
<body>
<h1> SJCET ADMISSION</h1>.
<img src="[Link]"/><p>SJCET structure that grows from the blossom. Minority catholic
institution .provides Btech and MTECh courses</p>
<p > SJCET BTECH ADMISSION 2022… </p>
<p >SJHMCT hotel management institution . Minority catholic institution .provides BHRM
courses</p> <h2 > SJCET BHRM ADMISSION 2022… </h2>
<h3 > SJCET BHRM ADMISSION 2022… </h2><h3 > SJCET PG ADMISSION 2022… </h3>
<p> PG courses MTECH,MBA,MTECH available at SJCET</p>
</body> </html>
Page 53 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-Background

► background-image Property
► The background-image property specifies the image URL for the image [Link] in the
format url(fileLocation).
► You can also set the background-color property in case the image is not found
► background-position Property
► The background-position property places the image on the page. The keywords top,
bottom, center, left and right are used individually or in combination for vertical and
horizontal positioning.
► For example, to position the image as horizontally centered (positioned at 50 percent of the
distance across the screen) and 30 pixels from the top, use

Page 55 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
CSS Property- values-Background

► background-attachment
► fixed Property The next property setting, background-attachment: fixed , fixes the image in the
position specified by background-position. Scrolling the browser window will not move the
image from its position.
► The default value, scroll, moves the image as the user scrolls through the document.
► background-repeat Property
► The background-repeat property controls background image tiling, which places multiple
copies of the image next to each other to fill the background.
► Here, we set the tiling to no-repeat to display only one copy of the background image.

► Other values include repeat (the default) to tile the image vertically and horizontally, repeat-x
to tile the image only horizontally or repeat-y to tile the image only vertically.
► text-indent property to indent the first line of text in the element by a specified amount, in this
case 1em.
► font-style property formats text is the font-style property, which allows you to set text to none,
italic or oblique
Page 56 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Positioning Elements: Absolute Positioning, z-index

► The CSS position property is used to set position for an element

► CSS introduced the position property ,which gives you greater control over how
document elements are displayed

► The position property specifies the type of positioning method used for an
element.

► Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first.

► They also work differently depending on the position value.

Page 57 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Positioning Elements: Absolute Positioning, z-index

► Absolute Position: An element with position: absolute; will cause it to adjust its position
with respect to its parent. If no parent is present, then it uses the document body as parent.

position: absolute;

► Relative Position: Setting the top, right, bottom, and left properties of an element with
position: relative; property will cause it to adjust from its normal position. The other
objects or elements will not fill the gap

► The element that is set to relative position can be shifted with respect to other elements in
the document. The element is shifted using top, right, bottom, and left properties

Page 58 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Positioning Elements: Absolute Positioning, z-index
► An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).
► However; if an absolute positioned element has no positioned ancestors, it uses the document
body, and moves along with page scrolling.
► Note: Absolute positioned elements are removed from the normal flow, and can overlap
elements.

Page 59 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
<!DOCTYPE html> <html> <head>
<meta charset = "utf-8">
<title>Relative Positioning</title>
<style type = "text/css">
p { font-size: 1.3em;
font-family: verdana, arial, sans-serif; }
span { color: red;font-size: .6em;height: 1em; }
.super { position: relative;top: -1ex; }
.sub { position: relative;bottom: -1ex; }
.shiftleft { position: relative;left: -1ex; }
.shiftright {position: relative;right: -1ex; }
</style> </head>
<body>
<p>The text at the end of this sentence <span class = "super">is in
superscript</span></p>
<p>The text at the end of this sentence <span class = "sub">is in
subscript</span></p>
<p>The text at the end of this sentence<span class = "shiftleft">is shifted
left</span></p>
<p>The text at the end of this sentence<span class = "shiftright">is
shifted right</span></p> </body> </html>
Positioning Elements:Relative Positioning

Page 62 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Positioning Elements: Absolute Positioning, z-index
► The z-index property allows you to layer overlapping elements.
► Elements that have higher z-index values are displayed in front of elements with lower z-index
values.
► In this example, .background_image has the lowest z-index (1), so it displays in the background.
The .foreground_image CSS rule (lines 14–17) gives the circle image (foreground_image.png, in
lines 30–31) a z-index of 2, so it displays in front of background_image.png.
► The p element in line 33 is given a z-index of 3 in line 21, so its content (Positioned Text) displays
in front of the other two.
► If you do not specify a z-index or if elements have the same z-index value, the elements are
placed from background to foreground in the order in which they’re encountered in the
document.
► The default z-index value is 0.

Page 64 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Positioning Elements: Relative Positioning

► In relative positioning, elements are positioned relative to other elements

► An element with position: relative; is positioned relative to its normal position.

► Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position. Other content will not be adjusted to
fit into any gap left by the element.

► Setting the position property to relative, as in class super (lines 15–16), lays out the element
on the page and offsets it by the specified top, bottom, left or right value.

► relative positioning keeps elements in the general flow of elements on the page, so
positioning is relative to other elements in the flow.

Page 65 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Positioning Elements: Relative Positioning

► Setting the position property to relative, as in class super (lines 15–16), lays out the element
on the page and offsets it by the specified top, bottom, left or right value.

► Class super (lines 15–16) lays out the text at the end of the sentence as superscript, and

► class sub (lines 17–18) lays out the text as subscript relative to the other text.

► Class shiftleft (lines 19–20) shifts the text at the end of the sentence left and class shiftright
(lines 21–22) shifts the text right

Page 66 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Span and Div

► <span> and <div> are tags that let you select a group of elements
and apply styles to them
► <span> is an inline tag
► no breaks are added before or after <span></span>
► <div> is a block tag
► a break is usually added by the browser before and after the <div></div>
tags
► The <span> tag is similar to other HTML tags,
► they can be nested and they have id and class attributes
► Another tag that is useful for style specifications:
<div> - Used to create document sections (or divisions) for which style can
be specified
Page 67 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Span and Div
<html><head>
<style>
div { line-height: 20px;
margin: 30px;
padding-bottom: 20px;
text-align: justify;
width: 140px;
color: red; }
</style></head>
<body><p>A div element is displayed like this:
<div>This is some text in a div [Link] is some text in a
div [Link] is some text in a div [Link] is some
text in a div [Link] is some text in a div [Link]
is some text in a div element.</div>
Change the default CSS settings to see the effect.
</p></body></html>
Page 68 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
<!DOCTYPE html >
<html >
<head> <title>[Link]</title>
<style type="text/css">
.spanred {font-size:24pt;font-family:Arial;color:red;}
.spanbrown {font-size:20pt;font-family:Arial;color:brown;}
</style>
</head>
<body>
<p>Markup language refers to the traditional way of marking up a document. It determines the structure
and meaning of textual elements . There are two types of markup languages.
<span class="spanred">Specific Markup Language </span>
It is used to generate the code that is specific to a particular application. Examples are
<span class="spanbrown">Generalized Markup Language</span>
It is generated to solve some problems associated with porting documents from one platform and operating
system configuration to another</p>
</body></html>
Span and Div

<html><head>
<style>
div {
line-height: 20px;
margin: 30px;
text-align: justify;
width: 140px;
color: red;
background-color:green;
}
</style></head><body><p>A div element is displayed
like this:
<div>This is some text in a div [Link] is some text
in a div [Link] is some text in a div [Link] is
some text in a div [Link] is some text in a div
[Link] is some text in a div element.</div>Change
the default CSS settings to see the
effect.</p></body></html>

Page 70 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Box Model

Page 71
Box Model

When the browser renders an element using the box model, the content is surrounded
by padding, a border and a margin

Page 72 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Box model

► The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.
► Content - The content of the box, where text and images appear
► Padding - Clears an area around the content. The amount of space between
the content of an element and its border , known as padding. The padding is
transparent
► Border - A border that goes around the padding and content
► Margin - Clears an area outside the border. The space between the border and
an adjacent element known as margin. The margin is transparent
► The box model allows us to add a border around elements, and to define
space between elements.

Page 73 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Box model

Page 74 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Box model-controlling the margin

► To define the margins of an element, use:

► margin : value

► where value = a length value (“em” is often used), a percentage (a margin

proportional to the element’s width, or auto
► To set margins on a side, use:
► margin-top
► margin-right
► margin-bottom
► margin-left
► E.g., body {margin-left:12px; margin-right:3%; margin-top:10px; margin-
bottom:1em}
► (“em” is often used), a margin proportional to the element’s width, or auto

Page 75 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Box model-setting the padding

► To define padding, use:

► padding: value

► where value = a length value or a percentage (a padding

proportional to the element’s width)
► To set padding on a side, use:
► padding-top

► padding-right

► padding-bottom

► padding-left

Page 76 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Box model-formatting the border

► Border can be set in three ways:

► border-width(thin,thick,medium or length in pixels)

► border-style (dotted,dashed,solid,double,default,none)

► border-color

► Short hands for setting border

► Ex: border:5px solid blue ;

► td,th { border:thin double black ; }

► To set the border, use:
► border : width_value style color
► To set borders on a side, use:
► border-top
► border-bottom
► border-left
► border-right

Page 77 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Box model-formatting the border

► Border can be set in three ways:

► border-width(thin,thick,medium or length in pixels)

► border-style (dotted,dashed,solid,[Link]-none)

► border-color

► Short hands for setting border

► Ex: border:5px solid blue ;

► td,th { border:thin double black ; }

► To set the border, use:
► border : width_value style color
► To set borders on a side, use:
► border-top
► border-bottom
► border-left
► border-right

Page 78 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Box model-formatting the border

<style type=“text/css”>
table{
padding-left:20px;
padding-right:10pt;
padding-top:3%;
padding-bottom:1%;
border-left:dotted;
border-right:double;
border-top:oblique;
border-bottom:solid;
border-width:10px;
border-color:red

}
</style>

Page 79 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Element Dimensions

► In addition to positioning elements, CSS rules can specify the actual dimensions of each element.

Page 81 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Media Types and media queries

Page 82
 Responsive web design

► Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops
► Responsive web design provides an optimal experience, easy reading and easy
navigation with a minimum of resizing on different devices such as desktops,
mobiles and tabs).
► Responsive web design makes your web page look good on all devices.
► Responsive web design uses only HTML and CSS.
► Web pages should not leave out information to fit smaller devices, but rather
adapt its content to fit any device:
► It is called responsive web design when you use CSS and HTML to resize, hide,
shrink, enlarge, or move the content to make it look good on any screen.

Page 83 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Responsive web design

► Breakpoints are the building blocks of responsive design. Use them to control when your
layout can be adapted at a particular viewport or device size.

► media queries are used to architect the CSS by breakpoint.

► Media queries are a feature of CSS that allow you to conditionally apply styles based on a
set of browser and operating system parameters.

► We most commonly use min-width in our media queries.

► Mobile first, responsive design is the goal.

► Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the
smallest breakpoint, and then layers on styles to adjust that design for larger devices.

Page 84 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Available breakpoints

► Breakpoints are the building blocks of responsive design.

► media queries are used to architect the CSS by breakpoint.

Page 85 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Responsive web design
 Media types and media queries

► CSS media types allow you to decide what a page should look like, depending on the kind of
media being used to display the page.
► Media queries are a key part of responsive web design, as they allow you to
create different layouts depending on the size of the viewport
► The @media rule, introduced in CSS2, made it possible to define different style
rules for different media types.
► Examples: You could have one set of style rules for computer screens, one for
printers, one for handheld devices, one for television-type devices, and so on.
► The most common media type for a web page is the screen media type, which is a
standard computer screen.
► Other media types in CSS include handheld, braille, speech and print

Page 87 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Media types and media queries

► The handheld medium is designed for mobile Internet devices such as smartphones, while braille is
for machines that can read or print web pages in braille.
► speech styles allow you to give a speech-synthesizing web browser more information about the
content of a page.
► The print media type affects a web page’s appearance when it’s printed.
► For a complete list of CSS media types, see

► Media types allow you to decide how a page should be presented on any one of these media
without affecting the others
► Media types allow you to decide how a page should be presented on any one of these media
without affecting the others.
► Example that applies one set of styles when the document is viewed on all media (including
screens) other than a printer, and another when the document is printed.

Page 88 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Media queries

► Media query is a CSS technique introduced in CSS3.

► Media queries can be used to check many things, such as:
► width and height of the viewport
► width and height of the device
► orientation (is the tablet/phone in landscape or portrait mode?)
► resolution
► Using media queries are a popular technique for delivering a tailored style sheet to
desktops, laptops, tablets, and mobile phones
► A media query consists of a media type and can contain one or more expressions,
which resolve to either true or false.
► It uses the @media rule to include a block of CSS properties only if a certain
condition is true.

Page 91 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Media queries

► meaning of the not, only and and keywords:

► not: The not keyword inverts the meaning of an entire media query.
► only: The only keyword prevents older browsers that do not support media
queries with media features from applying the specified styles. It has no effect on
modern browsers.
► and: The and keyword combines a media feature with a media type or other
media features.
► They are all optional. However, if you use not or only, you must also specify a
media type.
► Media Types are:

Page 92 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Media queries

► If the browser window is 600px or smaller, the background color will be lightblue:

Page 93 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Media queries

► Use mediaqueries to set the

background-color to lavender if the
viewport is 800 pixels wide or wider,
to lightgreen if the viewport is
between 400 and 799 pixels wide. If
the viewport is smaller than 400
pixels, the background-color is
lightblue

Page 94 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Media queries

► Media queries allow you to format your content to specific output devices. Media queries
include a media type and expressions.
► Some of the common media features include:
► width—the width of the part of the screen on which the document is rendered, including
any scrollbars
► height—the height of the part of the screen on which the document is rendered,
including any scrollbars
► device-width—the width of the screen of the output device
► device-height—the height of the screen of the output device
► orientation—if the height is greater than the width, orientation is portrait, and if the width
is greater than the height, orientation is landscape
► aspect-ratio—the ratio of width to height
► device-aspect-ratio—the ratio of device-width to device-height

Page 95 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Media queries

► Media queries are useful when you want to modify your site or app depending on
a device's general type (such as print vs. screen) or specific characteristics and
parameters (such as screen resolution or browser viewport width).

► Media queries are used for the following:

► To conditionally apply styles with the CSS @media and @import at-rules.

► To target specific media for the <style>, <link>, <source>, and other HTML
elements with the media= attribute.

Page 96 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Media queries

Page 97 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 JAVASCRIPT

Page 99
 MODULE 2

► (CSS, JavaScript) Introduction to Stylesheets : Introduction to CSS-Basic syntax and

structure-Inline Styles, Embedded Style Sheets, Conflict Resolution, Linking External Style
Sheets-Exploring CSS Selectors-Properties, values, Positioning Elements: Absolute
Positioning, Relative Positioning - Backgrounds-List Styles-Element Dimensions- Table
Layouts-Box Model and Text Flow-div and span -Basics of Responsive CSS, Media port &
Media Queries.

► Introduction to JavaScript : Introduction to Scripting- Programming fundamentals of

JavaScript -Obtaining User Input with prompt Dialogs-Arithmetic-Decision Making -Control
Statements - Functions -Arrays -Objects -Document Object Model (DOM) -Form
processing
Page 100 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 JAVASCRIPT

► JavaScript is a scripting language, which is used to enhance the functionality and appearance of
web pages

► JavaScript is a Client side scripting tool

► JavaScript is used in Web pages to improve the design, validate forms, detect browsers, create
cookies, and much more.

► JavaScript is the most popular scripting language on the internet, and works in all major browsers,
such as Internet Explorer, Mozilla, Firefox, Netscape, Opera

► JavaScript and Java are only related through syntax →JavaScript is dynamically typed →JavaScript’s
support for objects is very different

Page 101 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Java & JAVASCRIPT

► Java and JavaScript are two completely different languages in both concept and design!

► Java (developed by Sun Microsystems) is a powerful and much more complex programming

language - in the same category as C and C++.

► Object model of javascript is quite different from java & C++

► Java is strongly typed and Javascript is Dynamically typed

► In Java ,types are all known at compile time, where as compile time type checking impossible

► Objects in Java are static (variables or function is shared between all instances of class)where as

objects are dynamic

Page 102 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Uses of JAVASCRIPT
► JavaScript was designed to add interactivity to HTML
► JavaScript is a scripting language
► It is usually embedded directly into HTML pages
► JavaScript is an interpreted language
► provide programming capability at both the server and the client ends of a Web
connection.
► Improve appearance especially graphics
► Site navigation
► Perform calculations
► Validation of input
► DOM allows Javascript to access &modify the style

Page 103 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
How to put JAVASCRIPT in HTML code?

Page 104 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 How to embed JavaScript in an HTML document
► When a JavaScript script is encountered in the HTML document, the browser uses its JavaScript
interpreter to “execute” the script.
► Output from the script becomes the next markup to be rendered.
► When the end of the script is reached, the browser goes back to reading the HTML document and
displaying its content.
► There are two different ways to embed JavaScript in an HTML document:
– implicitly and explicitly.
► In explicit embedding, the JavaScript code physically resides in the XHTML document.
► In implicit embedding the JavaScript can be placed in its own file(.js file), separate from the XHTML
document.
► When JavaScript scripts are explicitly embedded, they can appear in either part of an XHTML
document—the head or the body
► The interpreter notes the existence of scripts that appear in the head of a document, but it does not
interpret them while processing the head.
► Scripts that are found in the body of a document are interpreted as they are found.
Page 106 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 How to embed JavaScript in an HTML document
► JavaScript are embedded in HTML documents , Either directly, as in • -

► Or indirectly, as a file specified in the src attribute of

Page 107 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 JavaScript “hello” example in an HTML document

Page 108 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 JavaScript “hello” example in an HTML document

Page 109 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 How to embed JavaScript in an HTML document
► <script> tag to indicate to the browser that the text which follows is part of a script.
► The type attribute specifies the MIME type of the script as well as the scripting language used in the script—in this
case, a text file written in javascript. In HTML5,
► the default MIME type for a <script> is "text/html", so you can omit the type attribute from your
<script> tags
► Individual white-space characters between words in a string are not ignored by the browser.
► browsers ignore leading white-space characters (i.e., white space at the beginning of a string).
► Strings in JavaScript can be enclosed in either double quotation marks (") or single quotation marks
(‘)
► document object, which represents the HTML5 document the browser is currently displaying. This
object allows you to specify text to display in the HTML5 document.
► document object’s writeln method is used to write a line of HTML5 markup in the HTML5 document.
► Method writeln instructs the browser to write the argument string into the web page for rendering.
► If the string contains HTML5 elements, the browser interprets these elements and renders them on
the screen
Page 110 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 JavaScript “hello” example with inline style

Page 111 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 JavaScript example with alert

Page 112 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 JavaScript example with alert-Usage of Escape Sequence

► The backslash (\) in a string is

an escape character.
► It indicates that a “special”
character is to be used in the
string.
► When a backslash is
encountered in a string, the
next character is combined
with the backslash to form an
escape sequence.

Page 113 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Programming fundamentals of JavaScript

Page 114
 GENERAL SYNTACTIC CHARACTERISTICS

► Identifier form: begin with a letter or underscore, followed by any number of

► letters, underscores, and digits
► Case sensitive
► 25 reserved words, plus future reserved words
► Comments: both // and /* … */
► Scripts are usually hidden from browsers that do not include JavaScript
► interpreters by putting them in special comments
► <!--
► -- JavaScript script –
► //-->
► Semicolons can be a problem. They are “somewhat” optional.
► Problem : When the end of the line can be the end of a statement ,JavaScript puts a semicolon there
► When separated by semicolons, multiple statements on one line are allowed: a = 5; b = 6; c = a + b;

Page 115 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 JavaScript example with alert, No semicolon

Page 116 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 PRIMITIVES

► JavaScript provides different data types to hold different types of values.

[Link] Types
• five primitive types:
– Number,
– String
– Boolean,
– Undefined,
– Null
[Link]-Primitive Types
• Objects such as functions and arrays are referred to as non-primitive values.

Page 117 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 PRIMITIVES

► Primitive Types
► five primitive types: Number, String, Boolean, Undefined, or Null
► Number, String, and Boolean have wrapper objects (Number, String, and Boolean).
► wrapper objects
► Wrapper objects are used to provide properties and methods that are convenient to use with the
values of primitive types.
► Anything that doesn’t belong to any of these five primitive types is considered an object.
► BUT each of these five primitive data types has a corresponding object constructor..
► First as a primitive data type:
var word = "hello";
► And then as an object:
var word = new String("hello");

Page 118 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 PRIMITIVES and NonPrimitive Values

► The fundamental difference between primitives and non-primitives is that primitives

are immutable and non-primitives are mutable.
► Primitives are known as being immutable data types because there is no way to
change a primitive value once it gets created.
var s = 'This is a string.’;
s[1] = ‘H’;
alert(s) // 'This is a string.’
► Non-primitive values are mutable data types.
► The value of an object can be changed after it gets created.
var arr = [ 'one', 'two', 'three', 'four', 'five’ ];
arr[1] = 'TWO’;
alert(arr) // [ 'one', 'TWO', 'three', 'four', 'five' ];
Page 119 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Numeric & String Literals,Other Primitives

► Numeric & String Literals

► Numeric literals – like Java All numeric values are stored in double-precision floating point
72,7.2,.72,7E2,7e2 etc are valid
► String literals are delimited by either ' or "
► Can include escape sequences (e.g., \t)
► All String literals are primitive values
► Other Primitive Types
► Boolean values are true and [Link] for evaluating Boolean Expressions
► The only Null value is null-means no value variable has not been explicitly declared
or assigned a value.
► The only Undefined value is undefined-variable has been explicitly declared, but not
assigned a value
► A variable declared without a value will have the value undefined. ex)var carName;
Page 120 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Declaring variables

► JavaScript is dynamically typed – any variable can be used for anything

► The interpreter determines the type of a particular occurrence of a variable
► Keywords are words that have special meaning in JavaScript.
► The keyword var at the beginning of the statement indicates that the word name is a
variable.
► A variable is a location in the computer’s memory where a value can be stored for
use by a script.
► All variables have a name and value, and should be declared with a var statement
before they’re used in a script.
► Variables can be implicitly or explicitly declared
var sum =0,today ="Monday", flag = false; var counter;
► Variable names are case sensitive , They must begin with a letter or the underscore character

Page 121 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Identifiers and Case Sensitivity

► The name of a variable can be any valid identifier.

► An identifier is a series of characters consisting of letters, digits, underscores ( _ )
and dollar signs ($) that does not begin with a digit and is not a reserved JavaScript
keyword.
► Identifiers may not contain spaces.
► Some valid identifiers are Welcome, $value, _value, m_inputField1 and button7.
► The name 7button is not a valid identifier, because it begins with a digit, and the
name ‘input field’ is not valid, because it contains a space.
► Remember that JavaScript is case sensitive—uppercase and lowercase letters are
considered to be different characters, so name, Name and NAME are different
identifiers.

Page 122 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Obtaining User Input with prompt Dialogs

Page 123
 Obtaining User Input with prompt Dialogs

► Scripting gives you the ability to generate part or all of a web page’s content at the time it’s
shown to the user.
► A script can adapt the content based on input from the user or other variables, such as the
time of day or the type of browser used by the client. Such web pages are said to be dynamic,
as opposed to static, since their content has the ability to change.
► The script uses another predefined dialog box from the window object—a prompt dialog—
which allows the user to enter a value that the script can use
► The JavaScript model for the HTML document is the Document object
► The model for the browser display window is the Window object
► The Document object has a method, write, which dynamically creates content
► The parameter is a string, often catenated from parts, some of which are variables e.g.,
[Link]("Answer: " + result );
► The Window object has three methods for creating dialog boxes, alert, confirm, & prompt

Page 124 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Obtaining User Input with prompt Dialogs

► prompt("What is your name?", "");

► Opens a dialog box and displays its string parameter, along with a text box and two buttons, OK and
Cancel
► An empty string is returned for the default input
► Null will be returned if we press the cancel button

Page 125 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Obtaining User Input with prompt Dialogs

Page 126 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Operators

Page 127
 Arithmetic Operators

Page 128 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Arithmetic Operators

Page 129 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Arithmetic Operators

Page 130 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Operator Precedence

► JavaScript applies the operators in arithmetic expressions uses the following

rules of operator precedence
► Multiplication, division and remainder operations are applied first. If an
expression contains several multiplication, division and remainder operations,
operators are applied from left to right.
► Multiplication, division and remainder operations are said to have the same
level of precedence.
► Addition and subtraction operations are applied next. If an expression contains
several addition and subtraction operations, operators are applied from left to
right.
► Addition and subtraction operations have the same level of precedence.

Page 131 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Assignment Operators

Page 132 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Assignment Operators

Page 133 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Comparison Operators

Page 134 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Logical Operators

Page 135 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Logical Operators

► The && operator has a higher precedence than the || operator.

► Both operators associate from left to right. An expression containing && or || operators is
evaluated only until truth or falsity is known.
► the || operator immediately returns true if the first operand is true. This performance
feature for evaluation of logical AND and logical OR expressions is called short-circuit
evaluation.
Page 136 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 String Concatenation Operator

► JavaScript has a version of the + operator for string concatenation that enables
a string and a value of another data type (including another string) to be
combined. The result of this operation is a new (and normally longer) string
► String catenation operator +
txt1 = “Ben";
txt2 = “Alex";
txt3 = txt1 + " " + txt2;
o/p→ Ben Alex
txt1 = "What a very ";
txt1 += "nice day";
o/p→What a very nice day
Page 137 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 String Concatenation Operator

► the + operator used for string concatenation can convert other variable types
to strings if necessary.
► Because string concatenation occurs between two strings, JavaScript must
convert other variable types to strings before it can proceed with the
operation.
► For example, if a variable age has an integer value equal to 21, then the
expression "my age is " + age evaluates to the string "my age is 21".
► JavaScript converts the value of age to a string and concatenates it with the
existing string literal "my age is ".

Page 138 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Creating and Using a New Date Object

► Create one with the new operator & Date constructor (no params)
► Local time methods of Date:
► toLocaleString– returns a string of the date
► getDate – returns the day of the month
► getMonth – returns the month of the year (0 – 11)
► getDay – returns the day of the week (0 – 6)
► getFullYear– returns the year
► getTime – returns the number of milliseconds since January 1, 1970
► getHours – returns the hour (0 – 23)
► getMinutes– returns the minutes (0 – 59)
► getMilliseconds– returns the milliseconds (0 – 999)

Page 139 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Creating and Using a New Date Object

Page 140 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Creating and Using a New Date Object

<script type="text/javascript">
var today = new Date();
alert(today);
alert([Link]());
alert([Link]());
alert([Link]());
alert([Link]());
alert([Link]())
</script>

Page 141 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Sum of two numbers

Page 142 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Sum of two numbers

Page 143 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Sum of two numbers

Page 144 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Memory Concepts

► Variable names such as number1, number2 and sum actually correspond to

locations in the computer’s memory.
► Every variable has a name, a type and a value

► Suppose the user entered the string 45 as the value for firstNumber. The script
converts firstNumber to an integer, and the computer places the integer value
45 into location number1
► Whenever a value is placed in a

memory location, the value replaces

the previous value in that location.
The previous value is lost.

Page 145 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Memory Concepts

► Once the script has obtained values for number1 and number2, it adds the
values and places the sum into variable sum.
► JavaScript does not require variables to have a declared type before they can
be used in a script.
► A variable in JavaScript can contain a value of any data type, and in many
situations JavaScript automatically converts between values of different types
for you.
► For this reason, JavaScript is

referred to as a loosely typed

language

Page 146 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Memory Concepts

► Unlike its predecessor languages C, C++ and Java, JavaScript does not require
variables to have a declared type before they can be used in a script
► When a variable is declared in JavaScript, but is not given a value, the variable
has an undefined value.
► Attempting to use the value of such a variable is normally a logic error.
► When variables are declared, they’re not assigned values unless you specify
them.
► Assigning the value null to a variable indicates that it does not contain a value.

Page 147 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 String properties and Methods

► String properties & methods:

► length e.g., var len = [Link];
► var str=“George”;
► var len = [Link]; //len→6
► charAt(position) e.g., [Link](3) //r
► indexOf(string) e.g., [Link](‘o’) //2
► substring(from, to) e.g., [Link](2,4) //org
► toLowerCase() e.g., [Link]() //george

Page 148 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 String properties and Methods

Page 149 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Precedence and Associativity

Page 150 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Control Statements

Page 151
 Control statement

Page 152 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Decision Making

Page 153
 Conditional statement

► if statement - use this statement if you want to execute some code only if a
specified condition is true
► if...else statement - use this statement if you want to execute some code if the
condition is true and another code if the condition is false
► if...else if....else statement - use this statement if you want to select one of
many blocks of code to be executed
► switch statement - use this statement if you want to select one of many blocks
of code to be executed .

Page 154 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Conditional statement

► if (condition)
{
code to be executed if condition is true
}
► JavaScript’s if statement that allows a script to make a decision based on the
truth or falsity of a condition.
► If the condition is met (i.e., the condition is true), the statement in the body of
the if statement is executed.
► If the condition is not met (i.e., the condition is false), the statement in the
body of the if statement is not executed.
► conditions in if statements can be formed by using the equality operators and
relational operators

Page 155 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Equality & Relational Operators

Page 156 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Conditional statement

► if (condition)
{
code to be executed if condition is true
}
► JavaScript’s if statement that allows a script to make a decision based on the
truth or falsity of a condition.
► If the condition is met (i.e., the condition is true), the statement in the body of
the if statement is executed.
► If the condition is not met (i.e., the condition is false), the statement in the
body of the if statement is not executed.
► conditions in if statements can be formed by using the equality operators and
relational operators

Page 157 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 IF statement

Page 158 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 IF ELSE

► if (condition)
{ code to be executed if condition is true
}
else
{ code to be executed if condition is not true
}
► JavaScript’s if statement that allows a script to make a decision based on the
truth or falsity of a condition.
► If the condition is met (i.e., the condition is true), the statement in the body of
the if statement is executed.
► If the condition is not met (i.e., the condition is false), the statement in the
body of the else block is executed.
Page 159 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 IF ELSE

Page 160 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ELSE IF STATEMENT

► Use the else if statement to specify a new condition if the first condition is false.
► Syntax
if (condition1)
{ block of code to be executed if condition1 is true }
else if (condition2)
{ block of code to be executed if the condition1 is false and condition2 is true }
else
{ block of code to be executed if the condition1 is false and condition2 is false }

Page 161 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Conditional Operator (?:)

► JavaScript provides an operator, called the conditional operator (?:), that’s closely
related to the if…else statement.
► The operator ?: is JavaScript’s only ternary operator—it takes three operands. The
operands together with the ?: form a conditional expression.
► The first operand is a Boolean expression, the second is the value for the conditional
expression if the expression evaluates to true and the third is the value for the
conditional expression if the expression evaluates to false.
[Link]( studentGrade >= 60 ? "Passed" : "Failed" );
► A conditional expression that evaluates to the string "Passed" if the condition
studentGrade >= 60 is true and evaluates to the string "Failed" if the condition is false

Page 162 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ELSE IF STATEMENT

Page 163 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Nested if else

Page 164 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Nested if else

Page 165 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Switch statements

► Use the switch statement to select one of many blocks of code to be executed. Syntax
switch(expression)
{ case 1: code block
break; …………
case n: code block
break;
default: code block
}
► The switch expression is evaluated once.
► The value of the expression is compared with the values of each case.
► If there is a match, the associated block of code is executed

Page 166 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Switch statements

Page 167 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Switch statements

Page 168 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Switch statements

Page 169 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Switch statements

Page 170 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Loop Statements

Page 171
 Loop statements

► Different Kinds of Loops

► JavaScript supports different kinds of loops:
► for - loops through a block of code a number of times
► For a loop, when you execute a loop for a fixed number of times, the loop does three specified tasks
(Statement 1, Statement 2, Statement 3)
► for/in - loops through the properties of an object
► while - loops through a block of code while a specified condition is true
► do/while - also loops through a block of code while a specified condition is true
► It will execute at least once even if the condition is to be not satisfied. If the condition is true, it will
continue executing and once the condition becomes false, it stops the code execution.

Page 172 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 For Loop statements

► for (statement 1; statement 2; statement 3)

{
code block to be executed
}
► Statement 1 is executed before the loop (the code block) starts.
► Statement 2 defines the condition for running the loop (the code block).
► Statement 3 is executed each time after the loop (the code block) has been executed.
Example
for (i = 0; i < 5; i++)
{
text += "The number is " + i + "";
alert(text);
}

Page 173 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Examples using For Loop statements

Page 174 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Examples using For Loop statements

Page 175 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 For..in statements

► The JavaScript for/in statement loops through the properties of an object:

► Example
<script type=“text/javascript”>
var x;
var cars =["Maruthi","Toyoto", "BMW"];
for (x in cars)
{
alert(x+ "="+ cars[x]);
}
</script>

Page 176 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 While loop statements

► The while loop loops through a block of code as long as a specified condition is true.
while (condition)
{ code block to be executed }
<script type="text/javascript">
var i=0;
while (i < 10)
{
alert("i="+i);
i++;
}
</script>

Page 177 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 While loop statements

Page 178 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Do ..While loop statements

► The do/while loop is a variant of the while loop.

► This loop will execute the code block once, before checking if the condition is true,
then it will repeat the loop as long as the condition is true.
► Syntax
do
{ code block to be executed
}
while (condition);

Page 179 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Break statements

► The break statement "jumps out" of a loop.

► It was used to "jump out" of a switch()
statement
► break statement also be used to jump out of a
loop.
► The break statement breaks the loop and
continues executing the code after the loop (if
any):
► Example

Page 180 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 continue statement

► The continue statement "jumps over" one

iteration in the loop.
► The continue statement breaks one
iteration (in the loop), if a specified
condition occurs, and continues with the
next iteration in the loop.
► This example skips the value of 3

Page 181 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Tutorial Questions

► A palindrome is a number or a text phrase that reads the same backward and
forward. For example, each of the following five-digit integers is a palindrome:
12321, 55555, 45554 and 11611. Write a script that reads in a five-digit integer and
determines whether it’s a palindrome. If the number is not five digits long, display an
alert dialog indicating the problem to the user. Allow the user to enter a new value
after dismissing the alert dialog.
► Develop a script that will determine the gross pay for each of three employees. The
company pays “straight time” for the first 40 hours worked by each employee and
pays “time and a half” for all hours worked in excess of 40 hours. You’re given a list
of the employees of the company, the number of hours each employee worked last
week and the hourly rate of each employee. Your script should input this information
for each employee, determine the employee’s gross pay and output HTML5 text that
displays the employee’s gross pay. Use prompt dialogs to input the data.

Page 182 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Tutorial Questions

► Write a script that uses looping to print the

following table of values. Output the results
in an HTML5 table. Use CSS to center the
data in each column.

Page 183 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Tutorial Questions

Predict the
output??

Page 184 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Functions

Page 185
 Functions

► function function_name([formal_parameters])
{ -- body – }
► Return value is the parameter of return ,If there is no return, or if the end of the
function is reached, undefined is returned .If return has no parameter, undefined is
returned
► Function call -Functions are invoked by writing the name of the function, followed
by a left parenthesis, followed by a comma-separated list of zero or more
arguments, followed by a right parenthesis
► If fun is the name of a function,
var a=fun();
or
fun(); /* A call to fun */

Page 186 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Functions-example

Page 187 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Functions

► The parameter values that appear in a call to a function are called actual parameters.
► The parameter names that appear in the header of a function definition, which
correspond to the actual parameters in calls to the function, are called formal
parameters.
► JavaScript uses the pass-by-value parameter-passing method.
► When a function is called, the values of the actual parameters specified in the call
are copied into their corresponding formal parameters, which behave exactly like
local variables.

Page 188 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Functions

Page 189 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Functions

Page 190 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Functions

Page 191 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Functions

► Scripts can also be placed in external files:

► External file:// [Link]
function test()
{
[Link]("demo").innerHTML = “welcome to Javascript.";
}
► External scripts are practical when the same code is used in many different web
pages.
► JavaScript files have the file extension .js.
► To use an external script, put the name of the script file in the src (source) attribute
of a <script> tag and embed in the html doc:
<script src="[Link]"></script>
Page 192 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Compute the roots of a quadratic equation -example

Page 193 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Example-Maximum of three numbers using user defined function

Page 194 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Example-Random Number Generation

► Consider the following statement:

var randomValue = [Link]();
► Method random generates a floating-point value from 0.0 up to, but not
including, 1.0.
► If random truly produces values at random, then every value in that range has an
equal chance (or probability) of being chosen each time random is called.
► [Link] determine the closest integer not greater than the argument’s value—
for example, [Link](1.75) is 1 and [Link](6.75) is 6
[Link]( 1 + [Link]() * 6 )
► The preceding expression multiplies the result of a call to [Link]() by 6 to
produce a value from 0.0 up to, but not including, 6.0. This is called scaling the
range of the random numbers.

Page 195 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Example-Random Number Generation

Page 196 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Example-Linear search

Page 197 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Example of function and array

Page 198 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Global functions

► JavaScript provides nine standard global functions.

► We’ve already used parseInt, parseFloat and isFinite.
► The global functions are all part of JavaScript’s Global object.
► The Global object contains all the global variables in the script, all the user-
defined functions in the script and all the functions. Because global functions and
userdefined functions are part of the Global object, some JavaScript programmers
refer to these functions as methods.
► You do not need to use the Global object directly—JavaScript references it for you

Page 199 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Global functions

Page 200 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Recursion

► A recursive function is a function that calls itself, either directly, or indirectly

through another function.
► The recursion step executes while the original call to the function is still open (i.e.,
it has not finished executing).
► The recursion step can result in many more recursive calls as the function divides
each new subproblem into two conceptual pieces.
► For the recursion eventually to terminate, each time the function calls itself with a
simpler version of the original problem, the sequence of smaller and smaller
problems must converge on the base case.

Page 201 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Recursive Function -Factorial

Page 202 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Recursive Function -Factorial

Page 203 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Recursion Vs Iteration

► Both iteration and recursion are based on a control statement:

► Iteration uses a repetition statement (e.g., for, while or do…while);
► recursion uses a selection statement (e.g., if, if…else or switch).
► Both iteration and recursion involve repetition:
► Iteration explicitly uses a repetition statement;
► recursion achieves repetition through repeated function calls.
► Iteration and recursion each involve a termination test:
► Iteration terminates when the loop-continuation condition fails;
► recursion terminates when a base case is recognized.
► Both iteration and recursion can occur infinitely:
► An infinite loop occurs with iteration if the loop-continuation test never becomes false;
► infinite recursion occurs if the recursion step does not reduce the problem each time via a
sequence that converges on the base case or if the base case is incorrect.

Page 204 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAYS

Page 205
 ARRAYS

► Arrays are data structures consisting of related data items.

► JavaScript arrays are “dynamic” entities in that they can change size after they’re
created.
► An array is a group of memory locations that all have the same name and normally
are of the same type (although this attribute is not required in JavaScript).
► To refer to a particular location or element in the array, we specify the name of the
array and the position number of the particular element in the array
► The first element in every array is the zeroth element.
► Thus, the first element of array c is referred to as c[0], the second element as c[1].
► The position number in square brackets is called an index and must be an integer or
an integer expression.
► If a program uses an expression as an index, then the expression is evaluated to
determine the value of the index.
Page 206 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAYS

► JavaScript arrays are used to store multiple values in a single variable.

► Example
var cars = [“Maruthi",“Toyoto","BMW"];
► An array can hold many values under a single name,
► Access the values of array by referring to an index number.
► Creating an Array Using an array literal we can create a JavaScript Array.
Syntax: var array_name = [item1, item2, ...];
► The following example also creates an Array, and assigns values to it:
► Example
var s = new Array(“AA", ”BB",“CC”);
var list = new Array(2, 4, 6, 8);

Page 207 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAYS

var n = [ 10, 20, 30, 40, 50 ];

► Uses a comma-separated initializer list enclosed in square brackets ([ and ]) to create a
five element array with indices of 0, 1, 2, 3 and 4.
► The array size is determined by the number of values in the initializer list.
var n = new Array( 10, 20, 30, 40, 50 );
► Also creates a five-element array with indices of 0, 1, 2, 3 and 4.
► In this case, the initial values of the array elements are specified as arguments in the
parentheses following new Array.
► The size of the array is determined by the number of values in parentheses
var n = [ 10, 20, , 40, 50 ];
► creates a five-element array in which the third element (n[2]) has the value undefined

Page 208 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Accessing elements of ARRAYS

► An array element can be accessed by referring to the index number.

► To access the value of the first element in s:

var name = s[0];

<script>
var s = ["AA", "BB", "CC"];
alert(s[0]+" "+s[1]+" "+s[2]);
</script>
► The length property of an array returns the length of an array (the number of array
elements). Ex)
var s = new Array(“AA", ”BB",“CC”);
alert([Link]);
//return 3
Page 209 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► Adding Array Elements

► To add a new element to an array is using the push method: •
[Link](“XX");

Page 210 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► Adding Array Elements

► New element can also be added to an array
using the length property:
var s = ["BB", "OO", "AA", "MM"];
s[[Link]] = "LL"; //add as last element
► Adding elements with high indexes can create
undefined "holes" in an array:
var s = ["BB", "OO", "AA", "MM"];
s[6] = "PP“

Page 211 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► Popping Array Elements

► The pop() method removes the last element from an array:
► Example
var s = ["AA", "BB", "CC"];
[Link]();
// Removes the last element (“CC") from array s
► The pop() method returns the value that was "popped out":
► Example
var s = ["BB","OO","AA",“MM"];
var x = [Link]();
// the value of x is "MM"

Page 212 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► Shifting is equivalent to popping, working on the first element instead of the

last.
► The shift() method removes the first array element and "shifts" all other
elements to a lower index.
► Example

var s = ["BB", "OO", "AA", “MM"];

[Link]();
// Removes the first element "BB" from ‘ s’
► The shift() method returns the string that was "shifted out":

Example
var s = ["BB", "OO", "AA", “MM"];
alert([Link]()); //dislays "BB"
Page 213 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► The unshift() method adds a new element to an

array (at the beginning), and "unshifts" older
elements:
► Example
var s = ["BB", "OO", "AA", “MM"];
[Link](“PP"); // Adds a new element “PP" to s
► The unshift() method returns the new array length.
► Example
var s = ["BB", "OO", "AA", “MM"];
alert([Link](“PP");
// Returns 5

Page 214 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► Deleting Elements
► Since JavaScript arrays are objects, elements can be deleted by using the JavaScript
operator delete:
► Example
var s = ["BB", "OO", "AA",“MM"];
delete s[0];
// Changes the first element in s to undefined
► Using delete may leave undefined holes in the array. Use pop() or shift() instead.

Page 215 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► Splicing an Array
► The splice() method can be used to add new items to an array:
► Example
var fruits = ["Banana","Orange", "Apple", "Mango"];
[Link](2, 0, "Lemon", "Kiwi");
► The first parameter (2) defines the position where new elements should be
added (spliced in).
► The second parameter (0) defines how many elements should be removed.
► The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be
added.

Page 216 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

Page 217 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► Merging an Array
► concat() method creates a new array by merging (concatenating) existing arrays:
► Example (Merging Two Arrays)
var girls = [“ammu",“annu"];
var boys = ["Emil",“richu","Linu"];
var mystds = [Link](boys); //Concatenates (joins) girls and boys
► The concat() method does not change the existing arrays. It always returns a new
[Link] concat() method can take any number of array arguments:
► Example (Merging Three Arrays)
var arr1 = ["cilie","Lona"]; var arr2 = ["Emil","Tobias","Linus"];
var arr3 = ["Robin","Morgan"];
var myChildren = [Link](arr2, arr3); // Concatenates arr1 with arr2 and arr3
Page 218 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► The concat() method can also take values as arguments:

► Example (Merging an Array with Values)
var arr1 = ["Cecilie", "Lone"];
var myChildren = [Link](["Emil", "asi", "Linu"]);
► slice() method slices out a piece of an array into a new array.
► slices out a part of an array starting from array element 1 ("Orange"):
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = [Link](1);
► slice() method creates a new array. It does not remove any elements from the source
array.

Page 219 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► This example slices out a part of an array starting from array element 3 ("Apple"):
var fruits = ["Banana","Orange","Lemon","Apple","Mango"];
var citrus = [Link](3);
► The slice() method can take two arguments like slice(1, 3).
► The method then selects elements from the start argument, and up to (but not
including) the end argument.
var fruits = ["Banana","Orange","Lemon","Apple","Mango"];
var citrus = [Link](1,3);
► The sort() method sorts an array alphabetically:
var fruits = ["Banana","Orange","Apple","Mango"];
[Link]();
// Sorts the elements of fruits
Page 220 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► Numeric Sort
► By default, the sort() function sorts values as strings.
► This works well for strings .
► However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is
bigger than "1".
► Because of this, the sort() method will produce incorrect result when sorting numbers
► Use compare function for numeric sorting.A function that defines an alternative sort
order. • The function should return a negative, zero, or positive value, depending on
the arguments, like: function(a, b)
{
return a-b;
}
Page 221 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ARRAY properties and methods

► When the sort() method compares two

values,itsends the values to the
compare function,and sorts the values
according to the returned (negative,
zero, positive) value.
► Example:
► When comparing 40 and 100, the
sort() method calls the compare
function(40,100).The function
calculates 40-100, and returns -60 (a
negative value).The sort function will
sort 40 as a value lower than 100.

Page 222 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Reverse Arrays

► The reverse() method reverses the elements in an array.

► use it to sort an array in descending order:

var fruits = ["Banana", "Orange", "Apple","Mango"];

[Link]();
// Sorts the elements of fruits
[Link]();
// Reverses the order of the elements

Page 223 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Associate Arrays

► Arrays with named indexes are called associative arrays (or hashes).
► JavaScript does not support arrays with named indexes.
► In JavaScript,arrays always use numbered indexes.
► Example
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = [Link];
// [Link] will return 3
var y = person[0];
// person[0] will return "John"
Page 224 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Associate Arrays

► If you use named indexes, JavaScript will redefine the array to a standard object.
► After that, some array methods and properties will produce incorrect results.
► Example:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = [Link];
// [Link] will return 0
var y = person[0];
// person[0] will return undefined

Page 225 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Multi Dimensional Arrays

► Multidimensional arrays with two indices are often used to represent tables of
values consisting of information arranged in rows and columns
► Arrays that require two indices to identify a particular element are called two-
dimensional arrays.
► Multidimensional arrays can have more than two dimensions.
► JavaScript does not support multidimensional arrays directly, but it does allow you
to specify arrays whose elements are also arrays.
► An array with m rows and n columns is called an m-by-n array.

Page 226 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Multi Dimensional Arrays

► Every element in array a is identified by an element name of the form

a[row][column]—a is the name of the array, and row and column are the indices that
uniquely identify the row and column, respectively, of each element in a.
► The element names in row 0 all have a first index of 0; the element names in
column 3 all have a second index of 3.

Page 227 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Arrays of One dimensional Arrays

► Multidimensional arrays can be initialized in declarations like a one-dimensional

array. Array b with two rows and two columns could be declared and initialized with
the statement .Two-dimensional array with three rows and four columns.

► The values are grouped by row in square brackets.

► The array [1, 2] initializes element b[0], and the array [3, 4] initializes element b[1].
So 1 and 2 initialize b[0][0] and b[0][1], respectively. Similarly, 3 and 4 initialize
b[1][0] and b[1][1], respectively.
► interpreter determines the number of rows by counting the number of subinitializer
lists— arrays nested within the outermost array. The interpreter determines the
number of columns in each row by counting the number of values in the subarray
that initializes the

Page 228 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Two-Dimensional Arrays with Rows of Different Lengths and new

► The rows of a two-dimensional array can vary in length. The declaration

var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];
► creates array b with row 0 containing two elements (1 and 2) and row 1 containing
three elements (3, 4 and 5).
► Creating Two-Dimensional Arrays with new
► A multidimensional array in which each row has a different number of columns can
be allocated dynamically, as follows:
var b;
b = new Array( 2 ); // allocate two rows
b[ 0 ] = new Array( 5 ); // allocate columns for row 0
b[ 1 ] = new Array( 3 ); // allocate columns for row 1
► The preceding code creates a two-dimensional array with two rows. Row 0 has five
columns, and row 1 has three columns.
Page 229 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
Two-Dimensional Arrays with Rows of Different Lengths and new

Page 230 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 OBJECTS

Page 231
 OBJECTS

► In JavaScript,object is the king.

► Almost "everything" is an object.
► Booleans can be objects (if defined with the new keyword)
► Numbers can be objects (if defined with the new keyword)
► Strings can be objects (if defined with the new keyword)
► Dates are always objects
► Maths are always objects
► Regular expressions are always objects
► Arrays are always objects
► Functions are always objects
► All JavaScript values, except primitives, are objects.

Page 232 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 OBJECTS

► With JavaScript, you can define and create your own objects.
► There are different ways to create new objects:
1)Define and create a single object, using an object literal.
2)Define and create a single object, with the keyword new.
► JavaScript objects are written with curly braces. Object properties are written as
name:value pairs, separated by commas.
► The following example creates a new JavaScript object with four properties:
var person = {firstName:“xyz”, lastName:“pqr", age:50, eyeColor:"blue"};
► The object (person) in the example above has 4 properties: firstName, lastName,
age, and eyeColor.
► A JavaScript object is a collection of named values
► The named values, in JavaScript objects, are called properties.
Page 233 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 OBJECT Creation using new

► The following example also creates a new JavaScript object with four properties:
► Properties are the values associated with a JavaScript object.
► A JavaScript object is a collection of unordered properties.
► Properties can usually be changed, added, and deleted, but some are read only
► Example
var person = new Object();
[Link] = “xyz";
[Link] = “pqr";
[Link] = 50;
[Link] = "blue";

Page 234 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 OBJECT Creation using new

► The following example also creates a new JavaScript object with four properties:
► Properties are the values associated with a JavaScript object.
► A JavaScript object is a collection of unordered properties.
► Properties can usually be changed, added, and deleted, but some are read only
► Example
var person = new Object();
[Link] = “xyz";
[Link] = “pqr";
[Link] = 50;
[Link] = "blue";

Page 235 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Add new OBJECT properties & Accessing OBJECT properties

► You can add new properties to an existing object by simply giving it a value.
► Assume that the person object already exists - you can then give it new properties:
► Example [Link] = ”kochi";
► syntax for accessing the property of an object is:
[Link] ----- [Link]
or
objectName["property"] -----person["age"]
or
objectName[expression] ------- x = "age"; person[x]

Page 236 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Accessing OBJECT properties

[Link] + " is " + [Link] + " years old.";

or
person["firstname"] + " is " + person["age"] + " years old.";
► The JavaScript for...in statement loops through the properties of an object.
► Syntax
for (variable in object)
{
code to be executed
}
► The block of code inside of the for...in loop will be executed once for each property.

Page 237 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Looping through the OBJECT

JavaScript for...in Loop

► Looping through the properties of an object:
► Example

Page 238 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Delete the properties of OBJECT

► The delete keyword deletes a property from an object:

► Example
var person = {fname:“xyz", lname:“pqr", age:50, city:“kochi"};
delete [Link];
or
delete person["age"];
► The delete keyword deletes both the value of the property and the property itself.
► After deletion, the property cannot be used before it is added back again.
► The delete operator is designed to be used on object properties.
► It has no effect on variables or functions

Page 239 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 STRINGS, NUMBERS, AND BOOLEANS AS OBJECTS

► When a JavaScript variable is declared with the keyword "new", the variable is
created as an object:
var x = new String();
// Declares x as a String object
var y = new Number();
// Declares y as a Number object
var z = new Boolean();
// Declares z as a Boolean object
► Avoid String, Number, and Boolean objects.

Page 240 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Math Object methods

Page 241 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Math Object methods

Page 242 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 String Object methods

Page 243 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 String Object methods

Page 244 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 String Object methods

Page 245 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Character processing methods

► String object’s character-processing methods, including:

► charAt—returns the character at a specific position

► charCodeAt—returns the Unicode value of the character at a specific position

► fromCharCode—returns a string created from a series of Unicode values

► toLowerCase—returns the lowercase version of a string

► toUpperCase—returns the uppercase version of a string

Page 246 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Character processing methods

► String object’s character-processing methods, including:

► charAt—returns the character at a specific position

► charCodeAt—returns the Unicode value of the character at a specific position

► fromCharCode—returns a string created from a series of Unicode values

► toLowerCase—returns the lowercase version of a string

► toUpperCase—returns the uppercase version of a string

Page 247 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Character processing methods

Page 248 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Character processing methods

Page 249 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Date Object Methods

Page 250 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Date Object Methods

Page 251 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Date Object Methods

Page 252 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Date Object Methods

Page 253 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Date Object Methods

Page 254 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Boolean and Number Objects

► JavaScript provides the Boolean and Number objects as object wrappers for boolean
true/ false values and numbers, respectively.
► These wrappers define methods and properties useful in manipulating boolean
values and numbers.
► When a JavaScript program requires a boolean value, JavaScript automatically
creates a Boolean object to store the value.
var b = new Boolean( booleanValue );
► The booleanValue specifies whether the Boolean object should contain true or false.
► If booleanValue is false, 0, null, [Link] or an empty string (""), or if no
argument is supplied, the new Boolean object contains false.

Page 255 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Boolean and Number Objects

► JavaScript automatically creates Number objects to store numeric values in a script.

You can create a Number object with the statement
var n = new Number( numericValue );
► The constructor argument numericValue is the number to store in the object.
► We can explicitly create Number objects, normally the JavaScript interpreter creates
them as needed

Page 256 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Boolean and Number Objects

Page 257 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Document Objects

► The document object, which we’ve used extensively, is provided by the browser and
allows JavaScript code to manipulate the current document in the browser.
► The document object has several properties and methods, such as method
[Link]

Page 258 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 DOCUMENT OBJECT MODEL

The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the content, structure, and style of a document."

Page 259
 Document Object Model

► The DOM gives you scripting access to all the elements on a web page.
► Inside the browser, the whole web page—paragraphs, forms, tables, etc.—is
represented in an object hierarchy.
► Using DOM,we can dynamically create, modify and remove elements in the page.
► JavaScript can change all the HTML elements in the page
► JavaScript can change all the HTML attributes in the page
► JavaScript can change all the CSS styles in the page
► JavaScript can remove existing HTML elements and attributes
► JavaScript can add new HTML elements and attributes
► JavaScript can react to all existing HTML events in the page
► JavaScript can create new HTML events in the page

Page 260 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 DOM nodes and Trees

► The document’s getElementById method is the simplest way to access a specific

element in a page. The method returns objects called DOM nodes.
► Every piece of an HTML5 page (elements, attributes, text, etc.) is modeled in the
web browser by a DOM node. All the nodes in a document make up the page’s
DOM tree, which describes the relationships among elements.
► Nodes are related to each other through child-parent relationships.
► An HTML5 element inside another element is said to be its child—the containing
element is known as the parent.
► A node can have multiple children but only one parent. Nodes with the same
parent node are referred to as siblings.

Page 261 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 DOM nodes and Trees

► The head and body nodes

are siblings, since they’re
both children of the html
node.
► The head contains the
meta and title nodes
► The body node contains
nodes representing each
of the elements in the
document’s body element.
► The li nodes are children
of the ul node, since
they’re nested inside it.
Page 262 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 DOM

► DOM is a model for describing HTML documents

► A common set of properties/methods to access everything in a web document
► When a web page is loaded, the browser creates a Document Object Model of the
page.
► The HTML DOM model is constructed as a tree of Objects:
► Objects are in a hierarchy
► The window is the parent for a given web page
► Document is the child with the objects that are most commonly manipulated
► The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
► HTML DOM methods are actions you can perform (on HTML Elements).
► HTML DOM properties are values (of HTML Elements) that you can set or change.

Page 264 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 DOM nodes and Trees

Page 265 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 FINDING & CHANGING HTML ELEMENTS

Page 266 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 ADDING AND DELETING HTML ELEMENTS

Page 267 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 CHANGING THE VALUE OF AN ATTRIBUTE

► To change the value of an HTML attribute, use this syntax:

[Link](id).attribute = new value
<!DOCTYPE html>
<html><body><img id=“clg“ src=“[Link]">
<script>
[Link](“clg").src =“[Link]";
</script>
</body>
</html>

Page 268 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 CHANGING THE HTML Style

► To change the style of an HTML element, use this syntax:

[Link](id).[Link] = new style
<html>
<body>
<p id="p1">Hello World!</p>
<script>
[Link]("p1").[Link] = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>

Page 269 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 DOM EVENTS

► HTML DOM allows JavaScript to react to HTML events:

► JavaScript can execute a statement (typically, call a function)
► A JavaScript can be executed when an event occurs, like when a user clicks on an
HTML element.
► To execute code when a user clicks on an element, add JavaScript code to an HTML
event attribute:
► when an event occurs
<… oneventname="javascript stmt;">
<BODY … onload="func();">
<INPUT type="submit“ name=“submit” onsubmit="fun();">

Page 270 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 DOM EVENTS

► onsubmit - call when submit button is clicked

► onclick - call when this button is clicked
► onreset - call when the reset button is clicked
► onload - call after page loads
► onmouseover - call when mouse pointer enters image area
► onmouseout - call when mouse pointer leaves image area
► onfocus - call when control receives focus
► onblur - call when a control loses focus
► onchange - call when a control loses focus and the value of its contents has changed
► many more

Page 271 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Event handling using DOM –onclick and onMouseover

Page 272 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Event handling using DOM –onload()

Page 273 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Form Handling –onclick event

Page 274 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Form Handling –onclick event

Page 275 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Form Handling –onchange event

Page 276 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Form Handling –onchange event

Page 277 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Node in DOM

► Any element on a page including text & whitespaces of a DOM structure is known as
“NODE.”
► Nodes can be between HTML Tags.
► Nodes available in DOM:
► [Link]

► [Link]

► [Link]

► [Link]

► [Link]

► [Link]

Page 278 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Adding and Removing Nodes (HTML Elements) in DOM

► To add a new element to the HTML DOM, you must create the element (element
node) first, and then append it to an existing element.

Page 279 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Adding and Removing Nodes (HTML Elements) in DOM

► This code creates a new <p> element:

const para = [Link]("p");
► To add text to the <p> element, you must create a text node first. This code creates a
text node: const node = [Link]("This is a new paragraph.");
► Then you must append the text node to the <p> element:
[Link](node);
► Finally you must append the new element to an existing [Link] code finds an
existing element:
const element = [Link]("div1");
► This code appends the new element to the existing element:
[Link](para);

Page 280 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Insert before in Node

► This code appends the new

element to the existing element:
[Link](para);

Page 281 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Remove element in Node

Page 282 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Replacing child element in Node

Page 283 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 DOM Collection

► The Document Object Model contains several collections, which are groups of related
objects on a page.
► DOM collections are accessed as properties of DOM objects such as the document
object or a DOM node.
► The document object has properties containing the
► images collection
► links collection
► forms collection
► anchors collection
► These collections contain all the elements of the corresponding type on the page

Page 284 [Link] Jacob, Department of Computer Science and Engineering, SJCET Palai
 Thank You

Page 285