WEB TECHNOLOGY Unit-2.pptx

Unit – II CSS & CLIENT SIDE
PROGRAMMING
Presented By
K.Karthick M.E(Ph.D.)
Assistant Professor/CSE,
Kongunadu College of Engineering And Technology.

Client-side Programming
• It is the program that runs on the client machine (browser) and deals with
the user interface/display and any other processing that can happen on
client machine like reading/writing cookies.
• 1) Interact with temporary storage
2) Make interactive web pages
3) Interact with local storage
4) Sending request for data to server
5) Send request to server
6) work as an interface between server and user
• The Programming languages for client-side programming are :
1) Javascript
2) VBScript
3) HTML
4) CSS
5) AJAX

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files

• Why Use CSS?
• CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.

CSS Solved a Big Problem
• HTML was NEVER intended to contain tags for formatting a web page!
• HTML was created to describe the content of a web page, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large websites, where fonts and color information were added to every
single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• CSS removed the style formatting from the HTML page!

CSS Syntax
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated
by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

• Example
• In this example all <p> elements will be center-aligned, with a red text
color:
• p {
color: red;
text-align: center;
}
• Example Explained
• p is a selector in CSS (it points to the HTML element you want to style:
<p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property value

• Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
• Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
• Superior styles to HTML − CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.
• Multiple Device Compatibility − Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.
• Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.

CSS Selectors
• A CSS selector selects the HTML element(s) you want to style.
• We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute
value)

The CSS element Selector
• The element selector selects HTML elements based on the element
name.
• Here, all <p> elements on the page will be center-aligned, with a red
text color:
• p {
text-align: center;
color: red;
}

• !DOCTYPE html>
• <html>
• <head>
• <style>
• p {
• text-align: center;
• color: red;
• }
• </style>
• </head>
• <body>
• <p>Every paragraph will be affected by the style.</p>
• <p id="para1">Me too!</p>
• <p>And me!</p>
• </body>
• </html>

The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element is unique within a page, so the id selector is used
to select one unique element!
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
• #para1 {
text-align: center;
color: red;
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• #para1 {
• color: red;
• }
• </style>
• </head>
• <body>
• <p id="para1">Hello World!</p>
• <p>This paragraph is not affected by the style.</p>
• </body>
• </html>

The CSS class Selector
• The class selector selects HTML elements with a specific class
attribute.
• To select elements with a specific class, write a period (.) character,
followed by the class name.
• .center {
text-align: center;
color: red;
}

The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
• * {
text-align: center;
color: blue;
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• * {
• color: blue;
• }
• </style>
• </head>
• <body>
• <h1>Hello world!</h1>
• <p>Every element on the page will be affected by the style.</p>
• <p id="para1">Me too!</p>
• <p>And me!</p>
• </body>
• </html>

The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same
style definitions.
• In this example we have grouped the selectors from the code above:
• h1, h2, p {
text-align: center;
color: red;
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1, h2, p {
• color: red;
• }
• </style>
• </head>
• <body>
• <h1>Hello World!</h1>
• <h2>Smaller heading!</h2>
• </body>
• </html>

How To Add CSS
• When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet.
• Three Ways to Insert CSS
• There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS

External CSS
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each HTML page must include a reference to the external style sheet
file inside the <link> element, inside the head section.

• <!DOCTYPE html>
• <html>
• <head>
• <link rel="stylesheet" href="mystyle.css">
• </head>
• <body>
• <h1>This is a heading</h1>
• </body>
• </html>

"mystyle.css"
• body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside the
head section.

• <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.

• <!DOCTYPE html>
• <html>
• <body>
• <h1 style="color:blue;text-align:center;">This is a heading</h1>
• <p style="color:red;">This is a paragraph.</p>
• </body>
• </html>

CSS - Colors
• CSS uses color values to specify a color. Typically, these are used to set
a color either for the foreground of an element (i.e., its text) or else
for the background of the element.
• They can also be used to affect the color of borders and other
decorative effects.

CSS Colors - Hex Codes
• A hexadecimal is a 6 digit representation of a color. The first two
digits(RR) represent a red value, the next two are a green value(GG),
and the last are the blue value(BB).
Color HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF

CSS Colors - Short Hex Codes
• This is a shorter form of the six-digit notation. In this format, each
digit is replicated to arrive at an equivalent six-digit value. For
example: #6A7 becomes #66AA77. Each hexadecimal code will be
preceded by a pound or hash sign '#'. Following are the examples to
use Hexadecimal notation.

Color Color HEX
#000
#F00
#0F0
#0FF
#FF0
#0FF
#F0F
#FFF

CSS Colors - RGB Values
• This color value is specified using the rgb( ) property. This property
takes three values, one each for red, green, and blue. The value can
be an integer between 0 and 255 or a percentage.
• To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this: rgb(255,
255, 255).

Color Color RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,192)
rgb(255,255,255)

CSS Backgrounds
• The CSS background properties are used to add background effects
for elements.
• The background color of a page is set like this:
• body {
background-color: lightblue;
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-color: lightblue;
• }
• </style>
• </head>
• <body>
• <p>This page has a light blue background color!</p>
• </body>
• </html>

CSS Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Example
Set the background image for a page:
body {
background-image: url("paper.gif");
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-image: url("paper.gif");
• }
• </style>
• </head>
• <body>
• <p>This page has an image as the background!</p>
• </body>
• </html>

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-image: url("img_tree.png");
• background-repeat: no-repeat;
• background-position: right top;
• margin-right: 200px;
• background-attachment: fixed;
• }
• </style>
• </head>
• <body>
• <h1>The background-attachment Property</h1>
• <p>The background-attachment property specifies whether the background image should scroll or be fixed
(will not scroll with the rest of the page).</p>
• </body>
• </html>

CSS Borders
The following values are allowed:
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden borde

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p.dotted {border-style: dotted;}
• p.dashed {border-style: dashed;}
• p.solid {border-style: solid;}
• p.double {border-style: double;}
• p.groove {border-style: groove;}
• p.ridge {border-style: ridge;}
• p.inset {border-style: inset;}
• p.outset {border-style: outset;}
• p.none {border-style: none;}
• p.hidden {border-style: hidden;}
• p.mix {border-style: dotted dashed solid double;}
• </style>
• </head>

• <body>
• <h2>The border-style Property</h2>
• <p>This property specifies what kind of border to display:</p>
• <p class="dotted">A dotted border.</p>
• <p class="dashed">A dashed border.</p>
• <p class="solid">A solid border.</p>
• <p class="double">A double border.</p>
• <p class="groove">A groove border.</p>
• <p class="ridge">A ridge border.</p>
• <p class="inset">An inset border.</p>
• <p class="outset">An outset border.</p>
• <p class="none">No border.</p>
• <p class="hidden">A hidden border.</p>
• <p class="mix">A mixed border.</p>
• </body>
• </html>

CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm, em, etc) or by
using one of the three pre-defined values: thin, medium, or thick:

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p.one {
• border-style: solid;
• border-width: 5px;
• }
• p.two {
• border-width: medium;
• }
• p.three {
• border-style: dotted;
• }

• p.four {
• border-width: thick;
• }
• p.five {
• border-style: double;
• }
• p.six {
• border-style: double;
• border-width: thick;
• }
• </style>
• </head>

• <body>
• <h2>The border-width Property</h2>
• <p>This property specifies the width of the four borders:</p>
• <p class="one">Some text.</p>
• <p class="two">Some text.</p>
• <p class="three">Some text.</p>
• <p class="four">Some text.</p>
• <p class="five">Some text.</p>
• <p class="six">Some text.</p>
• <p><b>Note:</b> The "border-width" property does not work if it is used
alone.
• Always specify the "border-style" property to set the borders first.</p>
• </body>
• </html>

CSS Border Color
• The border-color property is used to set the color of the four borders.
• The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p.one {
• border-color: red;
• }
• p.two {
• border-color: green;
• }
• p.three {
• border-color: blue;
• }
• </style>

• </head>
• <body>
• <h2>The border-color Property</h2>
• <p>This property specifies the color of the four borders:</p>
• <p class="one">A solid red border</p>
• <p class="two">A solid green border</p>
• <p class="three">A dotted blue border</p>
• <p><b>Note:</b> The "border-color" property does not work if it is
used alone. Use the "border-style" property to set the borders
first.</p>
• </body>
• </html>

CSS Margins
• The CSS margin properties are used to create space around elements,
outside of any defined borders.
• With CSS, you have full control over the margins. There are properties
for setting the margin for each side of an element (top, right, bottom,
and left).

• Margin - Individual Sides
• CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
• All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• div {
• border: 1px solid black;
• margin-top: 100px;
• margin-bottom: 100px;
• margin-right: 150px;
• margin-left: 80px;
• background-color: lightblue;
• }
• </style>
• </head>
• <body>
• <h2>Using individual margin properties</h2>
• <div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of
80px.</div>
• </body>
• </html>

CSS Fonts
Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• .p1 {
• font-family: "Times New Roman", Times, serif;
• }
• .p2 {
• font-family: Arial, Helvetica, sans-serif;
• }
• .p3 {
• font-family: "Lucida Console", "Courier New", monospace;
• }
• </style>
• </head>
• <body>
• <h1>CSS font-family</h1>
• <p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
• <p class="p2">This is a paragraph, shown in the Arial font.</p>
• <p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
• </body>
• </html>

CSS Text
• Text Color
• The color property is used to set the color of the text. The color is
specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"

Text Color and Background Color
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-color: lightgrey;
• color: blue;
• }
• h1 {
• background-color: black;
• color: white;
• }
• div {
• background-color: blue;
• color: white;
• }

• </style>
• </head>
• <body>
• <h1>This is a Heading</h1>
• <p>This page has a grey background color and a blue text.</p>
• <div>This is a div.</div>
• </body>
• </html>

CSS Text Alignment
• Text Alignment and Text Direction
• In this chapter you will learn about the following properties:
• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 {
• }
• h2 {
• text-align: left;
• }
• h3 {
• text-align: right;
• }
• </style>
• </head>
• <body
• <h1>Heading 1 (center)</h1>
• <h2>Heading 2 (left)</h2>
• <h3>Heading 3 (right)</h3>
• <p>The three headings above are aligned center, left and right.</p>
• </body>
• </html>

• Text Direction
• The direction and unicode-bidi properties can be used to change the
text direction of an element:

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p.ex1 {
• direction: rtl;
• unicode-bidi: bidi-override;
• }
• </style>
• </head>
• <body>
• <p>This is the default text direction.</p>
• <p class="ex1">This is right-to-left text direction.</p>
• </body>
• </html>

Text Decoration
• In this chapter you will learn about the following properties:
• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

• Add a Decoration Line to Text
• The text-decoration-line property is used to add a decoration line to
text.

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 {
• text-decoration: overline;
• }
• h2 {
• text-decoration: line-through;
• }
• h3 {
• text-decoration: underline;
• }
• p.ex {
• text-decoration: overline underline;
• }
• </style>
• </head>

• <body>
• <h1>Overline text decoration</h1>
• <h2>Line-through text decoration</h2>
• <h3>Underline text decoration</h3>
• <p class="ex">Overline and underline text decoration.</p>
• <p><strong>Note:</strong> It is not recommended to underline text that is
not a link, as this often confuses
• the reader.</p>
• </body>
• </html>

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 {
• text-decoration-line: overline;
• text-decoration-color: red;
• }
• h2 {
• text-decoration-line: line-through;
• text-decoration-color: blue;
• }
• h3 {
• text-decoration-line: underline;
• text-decoration-color: green;
• }
• p {
• text-decoration-line: overline underline;
• text-decoration-color: purple;
• }
• </style>

• </head>
• <body>
• <h1>Overline text decoration</h1>
• <h2>Line-through text decoration</h2>
• <h3>Underline text decoration</h3>
• <p>Overline and underline text decoration.</p>
• </body>
• </html>

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p.uppercase {
• text-transform: uppercase;
• }
• p.lowercase {
• text-transform: lowercase;
• }
• p.capitalize {
• text-transform: capitalize;
• }
• </style>
• </head>

• <body>
• <h1>Using the text-transform property</h1>
• <p class="uppercase">This text is transformed to uppercase.</p>
• <p class="lowercase">This text is transformed to lowercase.</p>
• <p class="capitalize">This text is capitalized.</p>
• </body>
• </html>

CSS Text Spacing
Text Spacing
In this chapter you will learn about the following properties:
•text-indent
•letter-spacing
•line-height
•word-spacing
•white-space

Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:
Example
p {
text-indent: 50px;
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p {
• text-indent: 50px;
• }
• </style>
• </head>
• <body>
• <h1>Using text-indent</h1>
• <p>In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me, 'just remember that all the people in this world
haven't had the advantages that you've had.'</p>
• </body>
• </html>

Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
The following example demonstrates how to increase or decrease the space between characters:

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h2 {
• letter-spacing: 5px;
• }
• h3 {
• letter-spacing: -2px;
• }
• </style>
• </head>
• <body>
• <h1>Using letter-spacing</h1>
• <h2>This is heading 1</h2>
• <h3>This is heading 2</h3>
• </body>
• </html>

Line Height
The line-height property is used to specify the space between lines:
Example
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p.small {
• line-height: 0.7;
• }
• p.big {
• line-height: 1.8;
• }
• </style>
• </head>
• <body>

• <h1>Using line-height</h1>
• <p>
• This is a paragraph with a standard line-height.<br>
• The default line height in most browsers is about 110% to 120%.<br>
• </p>
• <p class="small">
• This is a paragraph with a smaller line-height.<br>
• This is a paragraph with a smaller line-height.<br>
• </p>
• <p class="big">
• This is a paragraph with a bigger line-height.<br>
• This is a paragraph with a bigger line-height.<br>
• </p>
• </body>
• </html>

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

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 {
• text-shadow: 2px 2px;
• }
• </style>
• </head>
• <body>
• <h1>Text-shadow effect!</h1>
• </body>
• </html>

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 {
• text-shadow: 2px 2px red;
• }
• </style>
• </head>
• <body>
• </body>
• </html>

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 {
• color: white;
• text-shadow: 2px 2px 4px #000000;
• }
• </style>
• </head>
• <body>
• </body>
• </html>

The CSS Box Model
• In CSS, the term "box model" is used when talking about design and
layout.
• The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual
content. The image below illustrates the box model:

• Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
• The box model allows us to add a border around elements, and to
define space between elements.

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• div {
• background-color: lightgrey;
• width: 300px;
• border: 15px solid green;
• padding: 50px;
• margin: 20px;
• }
• </style>
• </head>
• <body>
• <h2>Demonstrating the Box Model</h2>
• <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:
borders, padding, margins, and the actual content.</p>

• <div>This text is the content of the box. We have added a 50px
padding, 20px margin and a 15px green border. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</div>
• </body>
• </html>

CSS Tables
• Table Borders
• To specify table borders in CSS, use the border property.
• The example below specifies a solid border for <table>, <th>, and
<td> elements:
• table, th, td {
border: 1px solid;
}

CSS Table Size
• table {
width: 100%;
}
th {
height: 70px;
}

CSS Table Alignment
• The text-align property sets the horizontal alignment (like left, right,
or center) of the content in <th> or <td>.
• By default, the content of <th> elements are center-aligned and the
content of <td> elements are left-aligned.
• td {
text-align: center;
}

CSS Table Style
• Table Padding
• To control the space between the border and the content in a table,
use the padding property on <td> and <th>
• th, td {
padding: 15px;
text-align: left;
}

CSS Responsive Table
• Responsive Table
• A responsive table will display a horizontal scroll bar if the screen is
too small to display the full content:
• <div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• table {
• border-collapse: collapse;
• width: 100%;
• }
• th, td {
• text-align: left;
• padding: 8px;
• }
• tr:nth-child(even) {background-color: #f2f2f2;}
• </style>
• </head>

• <body>
• <h2>Responsive Table</h2>
• <p>A responsive table will display a horizontal scroll bar if the screen is too
• small to display the full content. Resize the browser window to see the effect:</p>
• <p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>
• <div style="overflow-x: auto;">
• <table>
• <tr>
• <th>First Name</th>
• <th>Last Name</th>
• <th>Points</th>
• <th>Points</th>
• <th>Points</th>
• <th>Points</th>
• <th>Points</th>
• <th>Points</th>
• <th>Points</th>
• <th>Points</th>
• <th>Points</th>
• <th>Points</th>
• </tr>

• <tr>
• <td>Jill</td>
• <td>Smith</td>
• <td>50</td>
• <td>50</td>
• <td>50</td>
• <td>50</td>
• <td>50</td>
• <td>50</td>
• <td>50</td>
• <td>50</td>
• <td>50</td>
• <td>50</td>
• </tr>

• <tr>
• <td>Eve</td>
• <td>Jackson</td>
• <td>94</td>
• <td>94</td>
• <td>94</td>
• <td>94</td>
• <td>94</td>
• <td>94</td>
• <td>94</td>
• <td>94</td>
• <td>94</td>
• <td>94</td>
• </tr>

• <tr>
• <td>Adam</td>
• <td>Johnson</td>
• <td>67</td>
• <td>67</td>
• <td>67</td>
• <td>67</td>
• <td>67</td>
• <td>67</td>
• <td>67</td>
• <td>67</td>
• <td>67</td>
• <td>67</td>
• </tr>
• </table>
• </div>
• </body>
• </html>

CSS Lists
• HTML Lists and CSS List Properties
• In HTML, there are two main types of lists:
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters
• The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• ul.a {
• list-style-type: circle;
• }
• ul.b {
• list-style-type: square;
• }
• ol.c {
• list-style-type: upper-roman;
• }
• ol.d {
• list-style-type: lower-alpha;
• }
• </style>
• </head>

• <body>
• <h2>The list-style-type Property</h2>
• <p>Example of unordered lists:</p>
• <ul class="a">
• <li>Coffee</li>
• <li>Tea</li>
• <li>Coca Cola</li>
• </ul>
• <ul class="b">
• <li>Coffee</li>
• <li>Tea</li>
• </ul>

• <p>Example of ordered lists:</p>
• <ol class="c">
• <li>Coffee</li>
• <li>Tea</li>
• </ol>
• <ol class="d">
• <li>Coffee</li>
• <li>Tea</li>
• </ol>
• </body>
• </html>

An Image as The List Item Marker
• The list-style-image property specifies an image as the list item
marker:
• ul {
list-style-image: url('sqpurple.gif');
}

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• ul {
• list-style-image: url('sqpurple.gif');
• }
• </style>
• </head>

• <body>
• <h2>The list-style-image Property</h2>
• <p>The list-style-image property specifies an image as the list item
marker:</p>
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• </ul>
• </body>
• </html>

CSS 3.0
• WHAT IS CSS?
• Cascading Style Sheets (CSS) is a simple mechanism for adding style
(e.g., fonts, colors, spacing) to Web documents.
• What is CSS 3?
• CSS3 is the latest evolution of the Cascading Style Sheets language
and aims at extending CSS2.1. It brings a lot of new features and
additions, like rounded corners, shadows, gradients, transitions or
animations, as well as new layouts like multi-columns, flexible box or
grid layouts.

CSS Forms
• The look of an HTML form can be greatly improved with CSS:
• Styling Input Fields
• Use the width property to determine the width of the input field:
• input {
width: 100%;
}

• Bordered Inputs
• Use the border property to change the border size and color, and use
the border-radius property to add rounded corners:
• input[type=text] {
border: 2px solid red;
border-radius: 4px;
}

• Colored Inputs
• Use the background-color property to add a background color to the
input, and the color property to change the text color:
• input[type=text] {
background-color: #3CBC8D;
color: white;
}

CSS Animations
• CSS Animations
• CSS allows animation of HTML elements without using JavaScript or
Flash!
•

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• div {
• width: 100px;
• height: 100px;
• background-color: red;
• animation-name: example;
• animation-duration: 4s;
• }

• @keyframes example {
• 0% {background-color: red;}
• 25% {background-color: yellow;}
• 50% {background-color: blue;}
• 100% {background-color: green;}
• }
• </style>
• </head>
• <body>
• <h1>CSS Animation</h1>
• <div></div>
• <p><b>Note:</b> When an animation is finished, it goes back to its original
style.</p>
• </body>
• </html>

STYLE RULE CASCADING AND INHERITANCE
• Rule Cascade:
• A single style sheet associated with one or more web pages is
valuable, but in quite a limited way. For small sites, the single style
sheet is sufficient, but for larger sites, especially sites managed by
more than one person (perhaps several teams who may never
communicate) single style sheets don't provide the ability to share
common styles, and extend these styles where necessary. This can be
a significant limitation.
•

• Font Family
• The font family of a text is set with the font-family property.The font-
family property should hold several font names as a "fallback" system.
If the browser does not support the first font, it tries the next
font.Start with the font you want, and end with a generic family, to let
the browser pick a similar font in the generic family, if no other fonts
are available.
• Example
• p{font-family:"Times New Roman", Times, serif;}

• Font Style
• The font-style property is mostly used to specify italic text. This
property has three values:
• normal - The text is shown normally italic - The text is shown in italics

• Font Size
• The font-size property sets the size of the text.Being able to manage
the text size is important in web design.
• However, you should not use font size adjustments to make
paragraphs look like headings, or headings look like paragraphs.
• Always use the proper HTML tags, like <h1> - <h6> for headings and
<p> for paragraphs.
• The font-size value can be an absolute, or relative size. Absolute size:

JavaScript Tutorial
• JavaScript is the world's most popular programming language.
• JavaScript is the programming language of the Web.
• JavaScript is easy to learn.
• Why Study JavaScript?
• JavaScript is one of the 3 languages all web developers must learn:
• 1. HTML to define the content of web pages
• 2. CSS to specify the layout of web pages
• 3. JavaScript to program the behavior of web pages

What is JavaScript
• JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages.
• It is an interpreted, full-fledged programming language that enables
dynamic interactivity on websites when applied to an HTML document.
• JavaScript is used to create client-side dynamic pages.
• JavaScript is an object-based scripting language which is lightweight and
cross-platform.
• JavaScript is not a compiled language, but it is a translated language. The
JavaScript Translator (embedded in the browser) is responsible for
translating the JavaScript code for the web browser.

Features of JavaScript
• All popular web browsers support JavaScript as they provide built-in
execution environments.
• JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
• JavaScript is a weakly typed language, where certain types are implicitly
cast (depending on the operation).
• JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
• It is a light-weighted and interpreted language.
• It is a case-sensitive language.
• JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
• It provides good control to the users over the web browsers.

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

History of JavaScript
• In 1993, Mosaic, the first popular web browser, came into existence.
• In the year 1994, Netscape was founded by Marc Andreessen. He
realized that the web needed to become more dynamic.
• Thus, a 'glue language' was believed to be provided to HTML to make
web designing easy for designers and part-time programmers.
Consequently, in 1995, the company recruited Brendan Eich intending
to implement and embed Scheme programming language to the
browser.

• But, before Brendan could start, the company merged with Sun
Microsystems for adding Java into its Navigator so that it could
compete with Microsoft over the web technologies and platforms.
Now, two languages were there: Java and the scripting language.
Further, Netscape decided to give a similar name to the scripting
language as Java's. It led to 'Javascript'

JavaScript Example
• Javascript example is easy to code.
• JavaScript provides 3 places to put the JavaScript code:
• within body tag,
• within head tag
• external JavaScript file.

• <script type="text/javascript">
• document.write("JavaScript is a simple language for javatpoint learner
s");
• </script>
• The script tag specifies that we are using JavaScript.
• The text/javascript is the content type that provides information to
the browser about the data.
• The document.write() function is used to display dynamic content
through JavaScript.

• 3 Places to put JavaScript code
• Between the body tag of html
• Between the head tag of html
• In .js file (external java Script)

JavaScript Example : code between the body
tag
• alert("Hello Javatpoint");
• </script>
• <html>
• <body>
• </script>
• </body>
• </html>

JavaScript Example : code between the head
tag
• In this example, we are creating a function msg(). To create function
in JavaScript, you need to write function with function_name as given
below.

• <html>
• <head>
• function msg(){
• }
• </script>
• </head>
• <body>
• <p>Welcome to Javascript</p>
• <form>
• <input type="button" value="click" onclick="msg()"/>
• </form>
• </body>
• </html>

External JavaScript file
• We can create external JavaScript file and embed it in many html
page.
• It provides code re usability because single JavaScript file can be used
in several html pages.
• An external JavaScript file must be saved by .js extension. It is
recommended to embed all JavaScript files into a single file. It
increases the speed of the webpage.
• Let's create an external JavaScript file that prints Hello Javatpoint in a
alert dialog box.

• <html>
• <head>
• <script type="text/javascript" src="message.js"></script>
• </head>
• <body>
• <p>Welcome to JavaScript</p>
• <form>
• <input type="button" value="click" onclick="msg()"/>
• </form>
• </body>
• </html>

• message.js
• function msg(){
• }

Advantages of External JavaScript
• There will be following benefits if a user creates an external
javascript:
• It helps in the reusability of code in more than one HTML file.
• It allows easy code readability.
• It is time-efficient as web browsers cache the external js files, which
further reduces the page loading time.
• It enables both web designers and coders to work with html and js
files parallelly and separately, i.e., without facing any code
conflictions.
• The length of the code reduces as only we need to specify the
location of the js file.

JavaScript Basics
• JavaScript Comment:
• The JavaScript comments are meaningful way to deliver message. It is
used to add information about the code, warnings or suggestions so
that end user can easily interpret the code.
• The JavaScript comment is ignored by the JavaScript engine i.e.
embedded in the browser.
• Types of JavaScript Comments
• There are two types of comments in JavaScript.
• Single-line Comment
• Multi-line Comment

JavaScript Single line Comment
• It is represented by double forward slashes (//). It can be used before
and after the statement.
• Let’s see the example of single-line comment i.e. added before the
statement.
• <script>
• // It is single line comment
• document.write("hello javascript");
• </script>

• <script>
• var a=10;
• var b=20;
• var c=a+b;//It adds values of a and b variable
• document.write(c);//prints sum of 10 and 20
• </script>

JavaScript Multi line Comment
• It can be used to add single as well as multi line comments. So, it is more
convenient.
• It is represented by forward slash with asterisk then asterisk with forward
slash. For example:
• /* your code here */
• It can be used before, after and middle of the statement.
• <script>
• /* It is multi line comment.
• It will not be displayed */
• document.write("example of javascript multiline comment");
• </script>

JavaScript Variable
• A JavaScript variable is simply a name of storage location. There are
two types of variables in JavaScript : local variable and global variable.
• Rules:
• There are some rules while declaring a JavaScript variable (also
known as identifiers).
• Name must start with a letter (a to z or A to Z), underscore( _ ), or
dollar( $ ) sign.
• After first letter we can use digits (0 to 9), for example value1.
• JavaScript variables are case sensitive, for example x and X are
different variables.

• Correct JavaScript variables
• var x = 10;
• var _value="sonoo";
• Incorrect JavaScript variables
• var 123=30;
• var *aa=320;

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

JavaScript local variable
• A JavaScript local variable is declared inside block or function. It is
accessible within the function or block only. For example:
• <script>
• function abc(){
• var x=10;//local variable
• }
• </script>

JavaScript global variable
• A JavaScript global variable is accessible from any function. A
variable i.e. declared outside the function or declared with window
object is known as global variable. For example:

• <html>
• <body>
• <script>
• var data=200;//global variable
• function a(){
• document.writeln(data);
• }
• function b(){
• document.writeln(data);
• }
• a();//calling JavaScript function
• b();
•
• </script>
• </body>
• </html>

Javascript Data Types
• JavaScript provides different data types to hold different types of
values. There are two types of data types in JavaScript.
• Primitive data type
• Non-primitive (reference) data type
• JavaScript is a dynamic type language, means you don't need to
specify type of the variable because it is dynamically used by
JavaScript engine. You need to use var here to specify the data type. It
can hold any type of values such as numbers, strings etc. For example:
• var a=40;//holding number
• var b="Rahul";//holding string

JavaScript primitive data types
• There are five types of primitive data types in JavaScript. They are as
follows:
Data Type Description
String represents sequence of
characters e.g. "hello"
Number represents numeric values e.g.
100
Boolean represents boolean value either
false or true
Undefined represents undefined value
Null represents null i.e. no value at all

JavaScript non-primitive data types
• The non-primitive data types are as follows:
Data Type Description
Object represents instance through
which we can access members
Array represents group of similar
values
RegExp represents regular expression

JavaScript Operators
• JavaScript operators are symbols that are used to perform operations on
operands. For example:
• var sum=10+20;
• Here, + is the arithmetic operator and = is the assignment operator.
• There are following types of operators in JavaScript.
• Arithmetic Operators
• Comparison (Relational) Operators
• Bitwise Operators
• Logical Operators
• Assignment Operators
• Special Operators

JavaScript Arithmetic Operators
• Arithmetic operators are used to perform arithmetic operations on
the operands. The following operators are known as JavaScript
arithmetic operators. Operator Description Example
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus
(Remainder)
20%10 = 0
++ Increment var a=10; a++; Now a
= 11
-- Decrement var a=10; a--; Now a
= 9

JavaScript Comparison Operators
Operator Description Example
== Is equal to 10==20 = false
=== Identical (equal and of same
type)
10==20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false

JavaScript Bitwise Operators
& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2

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

JavaScript Assignment Operators
= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0

JavaScript Special Operators
Operator Description
(?:) Conditional Operator returns value based on
the condition. It is like if-else.
, Comma Operator allows multiple expressions
to be evaluated as single statement.
delete Delete Operator deletes a property from the
object.
in In Operator checks if object has the given
property
instanceof checks if the object is an instance of given
type
new creates an instance (object)
typeof checks the type of object.
void it discards the expression's return value.
yield checks what is returned in a generator by the
generator's iterator.

JavaScript Statement
• The JavaScript if-else statement is used to execute the code whether
condition is true or false. There are three forms of if statement in
JavaScript.
• If Statement
• If else statement
• if else if statement

JavaScript If statement
• It evaluates the content only if expression is true. The signature of
JavaScript if statement is given below.
• if(expression){
• //content to be evaluated
• }

• <html>
• <body>
• <script>
• var a=20;
• if(a>10){
• document.write("value of a is greater than 10");
• }
• </script>
• </body>
• </html>

JavaScript If...else Statement
• It evaluates the content whether condition is true of false. The syntax
of JavaScript if-else statement is given below.
• if(expression){
• //content to be evaluated if condition is true
• }
• else{
• //content to be evaluated if condition is false
• }

• <html>
• <body>
• <script>
• var a=20;
• if(a%2==0){
• document.write("a is even number");
• }
• else{
• document.write("a is odd number");
• }
• </script>
• </body>
• </html>

JavaScript If...else if statement
• It evaluates the content only if expression is true from several expressions. The
signature of JavaScript if else if statement is given below. if(expression1){
• //content to be evaluated if expression1 is true
• }
• else if(expression2){
• }
• else if(expression3){
• }
• else{
• //content to be evaluated if no expression is true
• }

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

JavaScript Switch
• The JavaScript switch statement is used to execute one code from
multiple expressions. It is just like else if statement that we have
learned in previous page. But it is convenient than if..else..if because
it can be used with numbers, characters etc.
• The signature of JavaScript switch statement is given below.

• switch(expression){
• case value1:
• code to be executed;
• break;
• case value2:
• code to be executed;
• break;
• ......
•
• default:
• code to be executed if above values are not matched;
• }

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

JavaScript Loops
• The JavaScript loops are used to iterate the piece of code using for,
while, do while or for-in loops. It makes the code compact. It is mostly
used in array.
• There are four types of loops in JavaScript.
• for loop
• while loop
• do-while loop
• for-in loop

JavaScript For loop
• The JavaScript for loop iterates the elements for the fixed number of
times. It should be used if number of iteration is known. The syntax of
for loop is given below.
• for (initialization; condition; increment)
• {
• code to be executed
• }

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

JavaScript while loop
• The JavaScript while loop iterates the elements for the infinite
number of times. It should be used if number of iteration is not
known. The syntax of while loop is given below.
• while (condition)
• {
• }

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

JavaScript do while loop
• The JavaScript do while loop iterates the elements for the infinite
number of times like while loop. But, code is executed at least once
whether condition is true or false. The syntax of do while loop is given
below.
• do{
• }while (condition);

• <!DOCTYPE html>
• <html>
• <body>
• <script>
• var i=21;
• do{
• document.write(i + "<br/>");
• i++;
• }while (i<=25);
• </script>
• </body>
• </html>

JavaScript Functions
• JavaScript functions are used to perform operations. We can call
JavaScript function many times to reuse the code.
• Advantage of JavaScript function
• There are mainly two advantages of JavaScript functions.
• Code reusability: We can call a function several times so it save
coding.
• Less coding: It makes our program compact. We don’t need to write
many lines of code each time to perform a common task.

• JavaScript Function Syntax
• The syntax of declaring function is given below.
• function functionName([arg1, arg2, ...argN]){
• //code to be executed
• }
• JavaScript Functions can have 0 or more arguments.

• JavaScript Function Example
• <html>
• <body>
• <script>
• function msg(){
• alert("hello! this is message");
• }
• </script>
• <input type="button" onclick="msg()" value="call function"/>
• </body>
• </html>

JavaScript Objects
• A javaScript object is an entity having state and behavior (properties
and method). For example: car, pen, bike, chair, glass, keyboard,
monitor etc.
• JavaScript is an object-based language. Everything is an object in
JavaScript.
• JavaScript is template based not class based. Here, we don't create
class to get the object. But, we direct create objects.

Creating Objects in JavaScript
• There are 3 ways to create objects.
• By object literal
• By creating instance of Object directly (using new keyword)
• By using an object constructor (using new keyword)

1) JavaScript Object by object literal
• The syntax of creating object using object literal is given below:
• object={property1:value1,property2:value2.....propertyN:valueN}
• <html>
• <body>
• <script>
• emp={id:102,name:"Shyam Kumar",salary:40000}
• document.write(emp.id+" "+emp.name+" "+emp.salary);
• </script>
• </body>
• </html>

2) By creating instance of Object
• The syntax of creating object directly is given below:
• var objectname=new Object();
• Here, new keyword is used to create object.

• <html>
• <body>
• <script>
• var emp=new Object();
• emp.id=101;
• emp.name="Ravi Malik";
• emp.salary=50000;
• document.write(emp.id+" "+emp.name+" "+emp.salary);
• </script>
• </body>
• </html>
•

3) By using an Object constructor
• Here, you need to create function with arguments. Each argument
value can be assigned in the current object by using this keyword.
• The this keyword refers to the current object.

• <html>
• <body>
• <script>
• function emp(id,name,salary){
• this.id=id;
• this.name=name;
• this.salary=salary;
• }
• e=new emp(103,"Vimal Jaiswal",30000);
•
• document.write(e.id+" "+e.name+" "+e.salary);
• </script>
• </body>
• </html>

JavaScript Can Change HTML Content
• One of many JavaScript HTML methods is getElementById().
• The example below "finds" an HTML element (with id="demo"), and
changes the element content (innerHTML) to "Hello JavaScript":

• <!DOCTYPE html>
• <html>
• <body>
• <h2>What Can JavaScript Do?</h2>
• <p id="demo">JavaScript can change HTML content.</p>
• <button type="button"
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
• </body>
• </html>

The <script> Tag
• In HTML, JavaScript code is inserted between <script> and </script> tags.
• <!DOCTYPE html>
• <html>
• <body>
• <h2>JavaScript in Body</h2>
• <p id="demo"></p>
• <script>
• document.getElementById("demo").innerHTML = "My First JavaScript";
• </script>
• </body>
• </html>

JavaScript Functions and Events
• A JavaScript function is a block of JavaScript code, that can be
executed when "called" for.
• For example, a function can be called when an event occurs, like
when the user clicks a button.

• JavaScript in <head> or <body>
• You can place any number of scripts in an HTML document.
• Scripts can be placed in the <body>, or in the <head> section of an
HTML page, or in both.

• <!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</head>
<body><h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
• </body>
</html>

JavaScript Output
• JavaScript Display Possibilities
• JavaScript can "display" data in different ways:
• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log().

Using innerHTML
• To access an HTML element, JavaScript can use the
document.getElementById(id) method.
• The id attribute defines the HTML element. The innerHTML property
defines the HTML content:

• <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Using document.write()
• For testing purposes, it is convenient to use document.write():
• <!DOCTYPE html>
<html>
<body>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

• Using window.alert()
• You can use an alert box to display data:
• <!DOCTYPE html>
<html>
<body>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

JavaScript Statements
• JavaScript Programs
• A computer program is a list of "instructions" to be "executed" by a
computer.
• In a programming language, these programming instructions are
called statements.
• A JavaScript program is a list of programming statements.
• In HTML, JavaScript programs are executed by the web browser.

• JavaScript Statements
• JavaScript statements are composed of:
• Values, Operators, Expressions, Keywords, and Comments.
• This statement tells the browser to write "Hello Dolly." inside an
HTML element with id="demo":
• Example
• document.getElementById("demo").innerHTML = "Hello Dolly.";
• Semicolons ;
• Semicolons separate JavaScript statements.
• Add a semicolon at the end of each executable statement:

• JavaScript White Space
• JavaScript ignores multiple spaces. You can add white space to your
script to make it more readable.
• The following lines are equivalent:
• let person = "Hege";
let person="Hege";

JavaScript Keywords
Keyword Description
var Declares a variable
let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a
condition
switch Marks a block of statements to be executed in
different cases
for Marks a block of statements to be executed in a
loop
function Declares a function
return Exits a function
try Implements error handling to a block of
statements

JavaScript Syntax
• JavaScript syntax is the set of rules, how JavaScript programs are
constructed:
• // How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y;

• RegExp Object
• A regular expression is a pattern of characters.
• The pattern is used to do pattern-matching "search-and-
replace" functions on text.
• In JavaScript, a RegExp Object is a pattern
with Properties and Methods.
• Syntax
• /pattern/modifier(s);

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

Metacharacter Description
. Find a single character, except newline or line terminator
w Find a word character
W Find a non-word character
d Find a digit
D Find a non-digit character
s Find a whitespace character
S Find a non-whitespace character
b Find a match at the beginning/end of a word, beginning like this: bHI, end like this: HIb
B Find a match, but not at the beginning/end of a word
0 Find a NULL character
n Find a new line character
f Find a form feed character
r Find a carriage return character
t Find a tab character
v Find a vertical tab character
xxx Find the character specified by an octal number xxx
xdd Find the character specified by a hexadecimal number dd
udddd Find the Unicode character specified by a hexadecimal number dddd

WEB TECHNOLOGY Unit-2.pptx

More Related Content

What's hot (20)

Similar to WEB TECHNOLOGY Unit-2.pptx (20)

More from karthiksmart21 (13)

Recently uploaded (20)

WEB TECHNOLOGY Unit-2.pptx