Scribd
Upload
2 views165 pages

Unit 2 - Full Stack Development - DR YJN

This document covers CSS3, detailing its features, advantages, and syntax for styling web pages. It explains different types of CSS styles (inline, internal, external), positioning methods (static, relative, fixed, absolute, sticky), and pseudo-classes for dynamic states. Additionally, it discusses background images and colors, providing examples for practical application in web development.

Uploaded by

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

Unit 2 - Full Stack Development - DR YJN

This document covers CSS3, detailing its features, advantages, and syntax for styling web pages. It explains different types of CSS styles (inline, internal, external), positioning methods (static, relative, fixed, absolute, sticky), and pseudo-classes for dynamic states. Additionally, it discusses background images and colors, providing examples for practical application in web development.

Uploaded by

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

Full Stack Development

Unit - 2

Dr. Y. J. Nagendra Kumar


HoD & Professor of IT
GRIET
Table of Contents

01 CSS3

02 Java Script

Dr. Y. J. Nagendra Kumar - 2


Dr. Y. J. Nagendra Kumar - 3
CSS 3

• CSS3 is the latest version of the CSS specification.

• CSS3 adds several new styling features and improvements to

enhance the web presentation capabilities.


Features of CSS 3
• We can easily apply same style rules on multiple elements.
• We can control the presentation of multiple pages of a website with a single style sheet.
• We can style dynamic states of elements such as hover, focus, etc.
• We can change the position of an element on a web page without changing the markup
using relative, absolute, fixed, sticky etc.,
• We can alter the display of existing HTML elements.
• We can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
• We can create animations and transitions effects without using any JavaScript.
Advantages of CSS 3

CSS Save Lots of Time: CSS gives lots of flexibility to set the style properties of an
element. We can write CSS once; and then the same code can be applied to the groups
of HTML elements, and can also be reused in multiple HTML pages.
Easy Maintenance : CSS provides an easy means to update the formatting of the
documents, and to maintain the consistency across multiple documents.
Superior Styles to HTML : CSS has much wider presentation capabilities than HTML
and provide much better control over the layout of your web pages.
Advantages of CSS 3

Pages Load Faster: CSS enables multiple pages to share the formatting information,
which reduces complexity and repetition in the structural contents of the documents.
It significantly reduces the file transfer size, which results in a faster page loading.
Multiple Device Compatibility: Using CSS the same HTML document can be presented
in different viewing styles for different rendering devices such as desktop, cell
phones, etc.
CSS Syntax
• A CSS stylesheet consists of a set of rules that are interpreted by the web browser
and then applied to the corresponding elements such as paragraphs, headings, etc.
in the document.
• A CSS rule have two main parts, a selector and one or more declarations:
CSS Syntax

• The selector specifies which element or elements in the HTML page the CSS

rule applies to.

• The declarations within the block determines how the elements are

formatted on a webpage. Each declaration consists of a property and a value

separated by a colon (:) and ending with a semicolon (;) and the declaration

groups are surrounded by curly braces { }


Types of Styles
Inline styles

• An inline CSS is used to apply a unique style to a single HTML element.


• An inline CSS uses the style attribute of an HTML element.

<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>
Internal styles
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
<html>
<head>
<style>
body {background-color: cyan;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External styles
• An external style sheet is used to define the style for many HTML pages.
• To use an external style sheet, add a link to it in the <head> section of each HTML page

<html> Style.css
<head>
body {
<link rel="stylesheet" href="Style.css"> background-color: lightblue;
</head> }
<body> h1 {
color: blue;
<h1>This is a heading</h1> }
<p>This is a paragraph.</p> p{
color: red;
</body> }
</html>
CSS – Static Positioning

• Positioning elements appropriately on the web pages is a necessity for a good


layout design. There are several methods in CSS that we can use for positioning
elements.
Static Positioning
• A static positioned element is always positioned according to the normal flow of
the page. HTML elements are positioned static by default.
• Static positioned elements are not affected by the top, bottom, left, and right
properties.
CSS – Static Positioning
<html> <body>
<head> <h2>position: static;</h2>
<p>An element with position: static; is not
<style> positioned in any special way; it is always
positioned according to the normal flow of
div.static { the page:</p>
position: static;
border: 3px solid #73AD21; <div class="static">
} This div element has position: static;
</style> </div>
</head </body></html>
CSS – Relative Positioning

• 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.
CSS – Relative Positioning

<html> <body>
<head> <h2>position: relative;</h2>
<style>
<p>An element with position: relative; is
div.relative {
positioned relative to its normal position:</p>
position: relative;
left: 30px;
<div class="relative">
border: 3px solid #73AD21;
This div element has position: relative;
}
</div>
</style>

</head> </body></html>
CSS – Fixed Positioning

• An element with position: fixed; is positioned relative to the viewport,

which means it always stays in the same place even if the page is

scrolled.

• The top, right, bottom, and left properties are used to position the

element.
CSS – Fixed Positioning
<html> <head> <body>
<style>
<h2>position: fixed;</h2>
div.fixed {
position: fixed; <p>An element with position: fixed; is positioned
relative to the viewport, which means it always
bottom: 0; stays in the same place even if the page is
right: 0; scrolled:</p>

width: 300px;
<div class="fixed">
border: 3px solid #73AD21;
This div element has position: fixed;
}
</div>
</style>
</head> </body>
</html>
CSS – Absolute Positioning

• An element with position: absolute; is positioned relative to the

nearest positioned ancestor.

• However; if an absolute positioned element has no positioned

ancestors, it uses the document body, and moves along with page

scrolling.
CSS – Absolute Positioning
<html><head> <body>
<style>
div.relative { <h2>position: absolute;</h2>
position: relative;
width: 400px; <p>An element with position: absolute; is
height: 200px; positioned relative to the nearest positioned
border: 3px solid #73AD21; ancestor (instead of positioned relative to the
} viewport, like fixed):</p>
div.absolute {
position: absolute; <div class="relative">This div element has
top: 80px; position: relative;
right: 0; <div class="absolute">This div element has
width: 200px; position: absolute;</div>
height: 100px; </div>
border: 3px solid #73AD21;
} </body>
</style> </head> </html>
CSS – Sticky Positioning

• An element with position: sticky; is positioned based on the user's

scroll position.
CSS – Sticky Positioning
<html><head> <body>
<style> <p>Try to <b>scroll</b> inside this frame to
understand how sticky positioning works.</p>
div.sticky {
position: sticky; <div class="sticky">I am sticky!</div>

top: 0; <div style="padding-bottom:2000px">


padding: 5px; <p>In this example, the sticky element sticks to
the top of the page (top: 0), when you reach its
background-color: #cae8ca; scroll position.</p>
border: 2px solid #4CAF50; <p>Scroll back up to remove the stickyness.</p>
<p>HTML 5: New Elements, Video & Audio,
} Canvas, Vector Graphics, Web Storage, Drag &
</style></head> Drop, Geolocation. </p>
</div>
</body></html>
Diff b/w Fixed and Sticky
CSS – Background Images

• An element with background-image; property sets one or more background

images for an element.

• By default, a background-image is placed at the top-left corner of an element,

and repeated both vertically and horizontally.

• The background of an element is the total size of the element, including

padding and border (but not the margin).

• Always set a background-color to be used if the image is unavailable.


CSS – Background Images

• Set a background-image for the <body> element:


<html><head>
<style>
body {
background-image: url("Picture2.jpg");
background-color: #cccccc;
}
</style></head>
<body>

<h1>The background-image Property</h1>

<p>Cascading Style Sheets</p>

</body></html>
CSS – Background Images

• Set a background-images for the <body> element:


<html><head>
<style>
body {
background-image: url("Picture1.jpg"),url("Picture4.jpg");
background-color: #ccccff;
}
</style></head>
<body>

<h1>The background-image Property</h1>

<p>Cascading Style Sheets</p>

</body></html>
CSS-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 mouses over it


• Style visited and unvisited links differently
• Style an element when it gets focus

The CSS pseudo-classes allow you to style the dynamic states of an element such as hover,
active and focus state, as well as elements that are existing in the document.

A pseudo-class starts with a colon (:)

selector:pseudo-class {
property: value;
}
CSS – Anchor Pseudo Classes

Using anchor pseudo-classes links can be displayed in different ways:


These pseudo-classes let you style unvisited links differently from visited ones. The most common styling
technique is to remove underlines from visited links.

<html><head>
<title>Example of Anchor Pseudo-classes</title>
<style>
a:link {
color: blue;
}
a:visited {
text-decoration: red;
}
</style></head>
<body>
<p>Visit <a href="https://www.griet.ac.in" target="_blank">www.griet.ac.in</a></p>
</body>
</html>
CSS – Dynamic Anchor Pseudo Classes

Some anchor pseudo-classes are dynamic — they're applied as a result of user interaction with the
document like on hover, or on focus etc.

<html> a:focus {
<head>
color: green;
<title>Example of Dynamic Anchor Pseudo-classes</title> }
<style>
a:link { </style>
color: blue; </head>
}
a:visited { <body>
text-decoration: none; <p>Visit <a href="https://www.griet.ac.in"
}
a:hover { target="_blank">www.griet.ac.in</a></p>
color: red; </body>
font-size: 22px;
} </html>
CSS – First Child Pseudo Classes

The first-child pseudo-class matches a specified element that is the first child of another element.

<html><head>
<title>Example of CSS :first-child Pseudo-class</title> <body> <h1>Full Stack Development</h1>
<style>
<ol>
ol{
padding: 0; <li>HTML 5</li>
list-style: none;
<li>CSS3</li>
}
ol li{ <li>Java Script</li>
padding: 10px;
<li>JQuery</li>
border-top: 1px solid #ff0000;
} <li>Node JS</li>
li:first-child {
<li>PHP MySQL</li>
border-top: none;
color:blue </ol>
}
</body></html>
</style></head>
CSS – Last Child Pseudo Classes

The last-child pseudo-class matches an element that is the last child element of some other
element.
<html> <head>
<title>Example of CSS :last-child Pseudo-class</title> <body> <h1>Full Stack Development</h1>
<style> <ul>
ul{
padding: 0; <li>HTML 5</li>
list-style: none; <li>CSS3</li>
}
ul li{ <li>Java Script</li>
display: inline; <li>JQuery</li>
padding: 20px;
border-right: 1px solid #ff0000; <li>Node JS</li>
} <li>PHP MySQL</li>
li:last-child {
border-right: none; </ul>
} </body></html>
</style></head>
CSS - Colors

• Colors are specified using predefined <html> <body>


color names <h1 style="background-color:Tomato;">Tomato</h1>

• Colors in CSS most often specified in <h1 style="background-color:Orange;">Orange</h1>


<h1 style=" background-color :#92a8d1;">#92a8d1</h1>
the following formats:
<h1 style=" background-color :#00ff00"> #00ff00</h1>
• a color keyword - like "red", "green",
<h1 style=" background-color :rgb(100,100,255);">
"blue", "transparent", etc. rgb(100,100,255)</h1>
• a HEX value - like "#ff0000", <h1 style=" background-color :rgb(201,76,76);">
"#00ff00", etc. rgb(201,76,76)</h1>
• an RGB value - like "rgb(255, 0, 0)" </body> </html>
CSS - Colors
CSS - TextColor

<html><body>
<h3 style="color:Tomato;">CSS - Colors</h3>

<p style="color:DodgerBlue;"> Colors are specified using predefined color names


Colors in CSS most often specified in the following formats:
</p>

<p style="color:MediumSeaGreen;">a color keyword - like "red", "green", "blue", "transparent", etc. <br>
a HEX value - like "#ff0000", "#00ff00", etc. <br>
an RGB value - like "rgb(255, 0, 0)"
</p>
</body></html>
CSS - TextColor
CSS – Border Color

<html>
<body>

<h1 style="border: 3px solid Tomato;">Full Stack Development</h1>

<h1 style="border: 3px solid DodgerBlue;">HTML 5</h1>

<h1 style="border: 3px solid Violet;">CSS 3</h1>

</body>
</html>
CSS – Border Color
CSS 3 – Background size Property

• The CSS3 provides several new properties to manipulate the background of an

element like background clipping, multiple backgrounds, and the option to

adjust the background size.

• The background-size property can be used to specify the size of the

background images.

• The background image size can be specified using the pixels or percentage

values as well as the keywords auto, contain, and cover.


CSS 3 – Background size Property
CSS 3 – Background size Property

<html>
<head>
<title>Setting background-size of an Element</title> </head>
<style> <body>
.box { <div class="box"></div>
width: 460px; </body>
height: 340px; </html>
background: url("Picture3.jpg") no-repeat;
background-size: contain;
border: 6px solid #ff00ff;
}
</style>
CSS 3 – Background size Property

Auto Property Contain Property Cover Property


CSS 3 – Background Clip Property

• The background-clip property defines how far the background (color or image) should

extend within an element.

• border-box Default value. The background extends behind the border

• padding-box The background extends to the inside edge of the border

• content-box The background extends to the edge of the content box


CSS 3 – Background Clip Property
<html>
<head>
<title>Example of CSS3 Background Clipping</title> <body>
<style> .box { <h2>Background Clipping Using border-box</h2>
width: 250px;
height: 150px; <div class="box clip1"></div>
padding: 10px; <h2>Background Clipping Using padding-box</h2>
border: 6px dashed #333;
background: orange; <div class="box clip2"></div>
} <h2>Background Clipping Using content-box</h2>
.clip1 {
background-clip: border-box; <div class="box clip3"></div>
} </body>
.clip2 {
background-clip: padding-box; </html>
}
.clip3 {
background-clip: content-box;
}
</style></head>
CSS 3 – Background Clip Property
CSS 3 – Multiple Backgrounds

• CSS3 gives you ability to add multiple backgrounds to a single element.

• The backgrounds are layered on the top of one another.

• The number of layers is determined by the number of comma-separated

values in the background-image.


CSS 3 – Multiple Backgrounds
<html> <head>
<title>Example of CSS3 Multiple Backgrounds</title>
<style>
.box {
width: 100%;
height: 500px;
background: url("1.jpg") no-repeat right, url("2.jpg") no-repeat left, url("3.jpg") no-repeat center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS 3 – Multiple Backgrounds
CSS 3 – Gradients

• The CSS3 gradient feature allows us to create a gradient from one color to

another without using any images.

• Provides a flexible solution to generate smooth transitions between two or

more colors.

• The elements with gradients can be scaled up or down to any extent without

losing the quality.

• Gradients are available in two styles: linear and radial.


CSS 3 Linear Gradients

• To create a linear gradient you must define at least two color stops.
• To create more complex gradient effects you can define more color stops.
• Color stops are the colors you want to render smooth transitions among.
• You can also set a starting point and a direction (or an angle) along which the
gradient effect is applied.
• The basic syntax of creating the linear gradients using the keywords can be given
with:
• linear-gradient(direction, color-stop1, color-stop2, ...)
CSS 3 – Linear Gradients – Top to Bottom

<html>
<head>
<title>Example of Linear Gradients from Top to
Bottom</title>
<style>
.gradient {
width: 400px;
height: 300px;

background: linear-gradient(red, yellow);


}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
CSS 3 – Linear Gradients – Left to Right

<html>
<head>
<title>Example of Linear Gradients from Left to
Right</title>
<style>
.gradient {
width: 400px;
height: 300px;

background: linear-gradient(to right, red, yellow);


</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
CSS 3 – Linear Gradients – Diagonal
The following example will create a linear gradient from the bottom left corner to the top right
corner of the element's box.
<html>
<head>
<title>Example of Linear Gradients - Gradients</title>
<style>
.gradient {
width: 400px;
height: 300px;

background: linear-gradient(to top right, red, yellow);


</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
CSS 3 – Linear Gradients – Using Angles

• If you want more control over the direction of the gradient, you can set the angle.

• The angle 0deg creates a bottom to top gradient, and positive angles represent
clockwise rotation, that means the angle 90deg creates a left to right gradient.

• The basic syntax of creating the linear gradients using angle can be given with:

• linear-gradient(angle, color-stop1, color-stop2, ...)


CSS 3 – Linear Gradients – Direction
<html><head>
<title>Example of Linear Gradients -
Direction</title>
<style>
.gradient {
width: 400px;
height: 300px;

background: linear-gradient(90deg, red, yellow);


</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
CSS 3 – Linear Gradients – Multiple Color Stops
You can also create gradients for more than two colors. All colors are evenly spaced.
<html>
<head>
<title>Example of Linear Gradients – Multiple Color
Stops</title>
<style>
.gradient {
width: 400px;
height: 300px;

background: linear-gradient(red, yellow, lime);


</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
CSS 3 Radial Gradients

• In a radial gradient color emerge from a single point and smoothly spread
outward in a circular or elliptical shape rather than fading from one color to
another in a single direction as with linear gradients. The basic syntax of creating
a radial gradient can be given with:

• radial-gradient(shape size at position, color-stop1, color-stop2, ...);

• position — Specifies the starting point of the gradient


• shape — Specifies the shape of the gradient's ending shape. It can be circle or
ellipse.
CSS 3 – Radial Gradients
<html>
<head>
<title>Example of Radial Gradients </title>
<style>
.gradient {
width: 400px;
height: 300px;

background: red;

background: radial-gradient(red, yellow, lime);


</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
CSS 3 – Radial Gradients - Shape
<html><head>
<title>Example of Radial Gradients -
Shape</title>
<style>
.gradient {
width: 400px;
height: 300px;

background: red;

background: radial-gradient(circle, red, yellow,


lime);
</style>
</head>
<body>
<div class="gradient"></div>
</body></html>
CSS Shadow Effects

With CSS you can add shadow to text and to elements.

• text-shadow

• box-shadow
CSS Text Shadow
• The CSS text-shadow property applies shadow to text.
• Specify the horizontal shadow (2px) and the vertical shadow (2px): Blur effect (5px) and add
color yellow

<head>
<style>
h1 {
text-shadow: 2px 2px 5px yellow;
}
</style>
</head>
<body>

<h1>Full Stack</h1>

</body> </html>
CSS Text Shadow

• White text with black shadow

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

<h1>CSS3 Text Shadow Effects</h1>

</body> </html>
CSS Text Shadow

• Shows a white text with black, blue, and darkblue shadow

<html> <head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0
25px blue, 0 0 5px darkblue;
}
</style> </head>
<body>
<h1>Full Stack Development!</h1>
</body></html>
CSS Box Shadow

<html> <body><h1>The box-shadow Property</h1>


<head>
<style> <div>A div element with a lightblue box-
div { shadow</div>

width: 300px; </body>


height: 100px; </html>

padding: 15px;
background-color: yellow;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
CSS Box Shadow

Add blur effect to the Shadow <body>


<h1>The box-shadow Property</h1>
<html><head>
<style> <div>A div element with a 5px blurred,
lightblue box-shadow.</div>
div {
width: 300px; </body> </html>
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
CSS Box Shadow

Set the inset parameter: It changes the shadow from an outer shadow (outset) to an
inner shadow
<body>
<html><head> <h1>The box-shadow Property</h1>
<style> <div>A div element with a blurred, lightblue,
div { inset box-shadow.</div>
width: 300px; </body></html>

height: 100px;
padding: 15px;
background-color: pink;
box-shadow: 10px 10px 5px yellow inset;
}
</style></head>
CSS Box Shadow – Multiple Shadows
<html><head> <div id="example1">
<style> <h2>Multiple shadows</h2>
#example1 { <p>box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green:</p>
border: 1px solid; </div>
padding: 10px; <br>
</body> </html>
box-shadow: 5px 5px lightblue, 10px
10px red, 15px 15px yellow;
margin: 20px;
}
</style></head>

<body>
<h1>Multiple Shadows</h1>
CSS - Transitions

• CSS transitions allows you to change property values smoothly, over a given duration.

• We will learn about the following properties:

• Transition: A shorthand property for setting the four transition properties into a single
property
• transition-delay: Specifies a delay (in seconds) for the transition effect
• transition-duration: Specifies how many seconds or milliseconds a transition effect takes to
complete
• transition-property: Specifies the name of the CSS property the transition effect is for
• transition-timing-function: Specifies the speed curve of the transition effect
CSS - Transition
• To create a transition effect, you must specify two things:
• the CSS property you want to add an effect to
• the duration of the effect
• The transition effect will start when the specified CSS property (width) changes value.

<html><head> <body>
<style> <h1>The transition Property</h1>
div { <p>Hover over the div element below, to see
width: 100px; the transition effect:</p>
height: 100px; <div></div>
background: blue; </body> </html>
transition: width 2s;
}
div:hover {
width: 300px;
}
</style></head>
CSS – Transition-Delay

The transition-delay property specifies a delay (in seconds) for the transition effect.
<html><head> <body>
<style>
div { <h1>The transition-delay Property</h1>
width: 100px;
height: 100px; <p>Hover over the div element below, to see
background: green; the transition effect:</p>
transition: width 3s;
transition-delay: 1s; <div></div>
}
div:hover { <p><b>Note:</b> The transition effect has a
width: 300px; 1 second delay before starting.</p>
}
</style> </body>
</head> </html>
CSS – Transition-Delay
CSS – Transition-Transform

<head> <body>
<style> <h1>Transition + Transform</h1>
div { <p>Hover over the div element below:</p>
width: 100px; <div></div>
height: 100px; </body> </html>
background: tomato;
transition: width 2s, height 2s, transform
2s;
}

div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style> </head>
CSS – Transition-timing-function
• The transition-timing-function property specifies the speed curve of the transition
effect.

• The transition-timing-function property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this
is default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
CSS – Transition-timing-function
<head> <style> <body>
div {
width: 100px; <h1>The transition-timing-function
height: 100px; Property</h1>
background: yellow;
transition: width 2s; <p>Hover over the div elements below, to see
} the different speed curves:</p>
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;} <div id="div1">linear</div><br>
#div3 {transition-timing-function: ease-in;} <div id="div2">ease</div><br>
#div4 {transition-timing-function: ease-out;} <div id="div3">ease-in</div><br>
#div5 {transition-timing-function: ease-in-out;} <div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
div:hover {
width: 300px; </body>
} </html>
</style> </head>
CSS – Transition-timing-function
CSS Animations

• An animation lets an element gradually change from one style to another.

• You can change as many CSS properties you want, as many times as you want.

• To use CSS animation, you must first specify some keyframes for the animation.

• Keyframes hold what styles the element will have at certain times.

• When you specify CSS styles inside the @keyframes rule, the animation will

gradually change from the current style to the new style at certain times.

• To get an animation to work, you must bind the animation to an element.


CSS Animations – Keyframes Rule
The following example binds the "example" animation to the <div> element. The animation will last
for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to
"yellow":

<html> <head> <body>


<style>
div { width: 100px; <h1>CSS Animation</h1>
height: 100px;
background-color: red; <div></div>
animation-name: example;
animation-duration: 4s; <p><b>Note:</b> When an animation is
} finished, it goes back to its original style.</p>
@keyframes example {
from {background-color: red;} </body>
to {background-color: yellow;} </html>
}
</style></head>
CSS Animations – Keyframes Rule
• The following example will change the background-color of the <div> element when the
animation is 25% complete, 50% complete, and again when the animation is 100% complete:
<html> <head>
<style> </style>
div { </head>
width: 100px; <body>
height: 100px;
background-color: red; <h1>CSS Animation</h1>
animation-name: example;
animation-duration: 4s; <div></div>
}
@keyframes example { <p><b>Note:</b> When an animation is
0% {background-color: red;} finished, it goes back to its original style.</p>
25% {background-color: yellow;}
50% {background-color: blue;} </body>
100% {background-color: green;} </html>
}
CSS Animations – Keyframes Rule
• The following example will change both the background-color and the position of the <div>
element when the animation is 25% complete, 50% complete, and again when the animation is
100% complete:
<html><head> </style>
<style> </head>
div { width: 100px; <body>
height: 100px;
background-color: red; <h1>CSS Animation</h1>
position: relative;
animation-name: example; <div></div>
animation-duration: 4s; }
@keyframes example { <p><b>Note:</b> When an animation
0% {background-color:red; left:0px; top:0px;} is finished, it goes back to its original
style.</p>
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
</body>
75% {background-color:green; left:0px; top:200px;} </html>
100% {background-color:red; left:0px; top:0px;}
}
CSS Animations – Animation Delay
The animation-delay property specifies a delay for the start of an animation.
<html><head>
</style>
<style>
</head>
div { width: 100px;
<body>
height: 100px;
background-color: red;
<h1>CSS Animation</h1>
position: relative;
animation-name: example;
<p>The animation-delay property
animation-duration: 4s;
specifies a delay for the start of an
animation-delay: 2s; }
animation. The following example has a 2
@keyframes example {
seconds delay before starting the
0% {background-color:red; left:0px; top:0px;}
animation:</p>
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
<div></div>
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
</body></html>
}
CSS Animations – Animation Direction

• The animation-direction property specifies whether an animation should be


played forwards, backwards or in alternate cycles.

• The animation-direction property can have the following values:


• normal - The animation is played as normal (forwards). This is default
• reverse - The animation is played in reverse direction (backwards)
• alternate - The animation is played forwards first, then backwards
• alternate-reverse - The animation is played backwards first, then forwards
CSS Animations – Iteration Count, Reverse
• The animation-iteration-count property specifies the number of times an animation should run.
• The following example will run the animation 3 times before it stops:
<html><head>
<style> div { width: 100px; </style> </head>
height: 100px; <body>
background-color: red;
position: relative; <h1>CSS Animation</h1>
animation-name: example;
animation-duration: 4s; <p>The animation-iteration-count property
animation-iteration-count: 3; //infinite specifies the number of times an animation
animation-direction: reverse; } should run. The following example will run the
@keyframes example { animation 3 times before it stops:</p>
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;} <div></div>
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;} </body>
100% {background-color:red; left:0px; top:0px;} </html>
}
CSS – Speed Curve of the Animation

• The animation-timing-function property specifies the speed curve of the


animation.
• The animation-timing-function property can have the following values:
• ease - Specifies an animation with a slow start, then fast, then end slowly
(this is default)
• linear - Specifies an animation with the same speed from start to end
• ease-in - Specifies an animation with a slow start
• ease-out - Specifies an animation with a slow end
• ease-in-out - Specifies an animation with a slow start and end
CSS Animations – Timing Function
<html><head> <body>
<style> div {
width: 100px; <h1>CSS Animation</h1>
height: 50px;
background-color: yellow; <p>The animation-timing-function property
font-weight: bold; specifies the speed curve of the animation. The
position: relative; following example shows some of the different
animation: mymove 5s infinite; } speed curves that can be used:</p>
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;} <div id="div1">linear</div>
#div3 {animation-timing-function: ease-in;} <div id="div2">ease</div>
#div4 {animation-timing-function: ease-out;} <div id="div3">ease-in</div>
#div5 {animation-timing-function: ease-in-out;} <div id="div4">ease-out</div>
@keyframes mymove { <div id="div5">ease-in-out</div>
from {left: 0px;}
to {left: 300px;} } </body>
</style></head> </html>
CSS Flexbox
• Flexible box, commonly referred to as flexbox, is a new layout model

introduced in CSS3 for creating the flexible user interface design with

multiple rows and columns without using the percentage or fixed length

values.

• The CSS3 flex layout model provides a simple and powerful mechanism for

handling the distributing of space and alignment of content automatically.


CSS Flex Layout
• Flexbox consists of flex containers and flex items.
• A flex container can be created by setting the display property.
• All child elements of flex container automatically become flex items and are laid out
using the flex layout model.
• Flex items are positioned inside a flex container along a flex line controlled by the
flex-direction property.
CSS Columns-Flexbox
<html><head> .flex-container div.bg-alt{
<title>Example of CSS3 Three Equal Flex Column background: #b4bac0;
Layout</title> }
<style> </style>
.flex-container { </head>
width: 80%; <body>
min-height: 300px; <div class="flex-container">
margin: 0 auto; <div class="item1">Item 1</div>
font-size: 32px; <div class="item2 bg-alt">Item 2</div>
display: flex; <div class="item3">Item 3</div>
border: 1px solid #808080; </div>
} <p><strong>Note:</strong> If you change the
.flex-container div { width of the flex-container the width of the flex
padding: 10px; items will automatically adjusted without doing
background: #dbdfe5; anything.</p>
flex: 1; </body>
} </html>
CSS Columns-Flexbox
CSS Columns-Flexbox – Direction

<html><head> .item1 { background: #e84d51; }


<title>Example of Controlling Flow inside Flex .item2 { background: #7ed636; }
Container along Main Axis</title> .item3 { background: #2f97ff; }
<style> </style>
.flex-container { </head>
width: 80%; <body>
min-height: 300px; <div class="flex-container">
margin: 0 auto; <div class="item1">Item 1</div>
font-size: 32px; <div class="item2">Item 2</div>
display: flex; <div class="item3">Item 3</div>
flex-direction: row-reverse; //column </div>
border: 1px solid #666; <p><strong>Note:</strong> Change the value of
} flex-direction property from "row-reverse" to
.flex-container div { "row" to understand how this property works.</p>
padding: 10px; </body>
flex: 1; </html>
}
CSS Columns-Flexbox – Direction
End of CSS3
Jeevan Nagendra 1
Jeevan Nagendra 2
Jeevan Nagendra 3
Jeevan Nagendra 4
Jeevan Nagendra 5
JavaScript is not Java
• JavaScript has some features that resemble features in
Java:
– JavaScript has Objects and primitive data types
-- JavaScript has Events and event handlers
– Exception handling in JavaScript is almost the same
as in Java
• JavaScript has some features unlike anything in Java:
– Variable names are untyped: the type of a variable
depends on the value it is currently holding
– JavaScript has with statements and a new kind of for
statement

Jeevan Nagendra 6
Jeevan Nagendra 7
Jeevan Nagendra 8
Jeevan Nagendra 9
Jeevan Nagendra 10
Comments
• Comments are as in C or Java:
– Between // and the end of the line
– Between /* and */
• Java’s javadoc comments, /** ... */, are treated just the
same as /* ... */ comments; they have no special
meaning in JavaScript

Jeevan Nagendra 11
Jeevan Nagendra 12
Jeevan Nagendra 13
Jeevan Nagendra 14
Jeevan Nagendra 15
Jeevan Nagendra 16
Jeevan Nagendra 17
Jeevan Nagendra 18
Jeevan Nagendra 19
Jeevan Nagendra 20
Jeevan Nagendra 21
Jeevan Nagendra 22
Jeevan Nagendra 23
Jeevan Nagendra 24
Jeevan Nagendra 25
Jeevan Nagendra 26
Jeevan Nagendra 27
Jeevan Nagendra 28
Jeevan Nagendra 29
Jeevan Nagendra 30
Jeevan Nagendra 31
Jeevan Nagendra 32
Jeevan Nagendra 33
Jeevan Nagendra 34
Jeevan Nagendra 35
Jeevan Nagendra 36
Jeevan Nagendra 37
Jeevan Nagendra 38
Jeevan Nagendra 39
Jeevan Nagendra 40
Jeevan Nagendra 41
Jeevan Nagendra 42
Functions & Objects

Jeevan Nagendra 43
Jeevan Nagendra 44
Functions

Jeevan Nagendra 45
Jeevan Nagendra 46
Jeevan Nagendra 47
<html>
<head>
<script language="javascript">
function add()
{
var a,b,c;
a=document.calc.val1.value;
b=document.calc.val2.value;
c=parseInt(a)+parseInt(b);
document.calc.result.value=c;
}
</script>
</head>
Jeevan Nagendra 48
<body>
<form name="calc">
enter text1:
<input type="text" name="val1" size=20><br>

enter text2:
<input type="text" name="val2" size=20><br>
<input type="button" value="SUBMIT"
onclick="add()"><br>

result :
<input type ="text" name="result"><br>
</form></body></html>
Jeevan Nagendra 49
Exercises

• Find out factorial of a given number


without using Recursion
• Same function Using Recursion
• Maximum of 3 numbers using
Functions and also using predefined
function Math.max()

Jeevan Nagendra 50
Objects
• Objects have attributes and methods.
• Many pre-defined objects and object
types.
• Using objects follows the syntax of
Java:
objectname.attributename
objectname.methodname()

Jeevan Nagendra 51
The Math Object
• Access to mathematical functions and
constants.
• Constants: Math.PI
• Methods: Math.random()
Math.abs(x), Math.ceil(x)
Math.sin(x), Math.floor(x)
Math.cos(x), Math.exp(x)
Math.max(x,y), Math.log(x)
Math.min(x,y), Math.round(x),
Math.sqrt(x), Math.pow(x,y)
Jeevan Nagendra 52
Math object in use
// returns an integer between 1 and 6
function roll() {
var x = Math.random();

// convert to range [0,6.0)


x = x * 6;
// add 1 and convert to int
return parseInt(1+x );
}

document.writeln("Roll is “ + roll() );

Jeevan Nagendra 53
The String Object
• Access to String functions
Methods:
var s1=“Information”,s2=“Technology”
charAt(index), Ex: s1.charAt(2)
concat(string),Ex: s1.concat(s2)
slice(start,end), Ex: s1.slice(3,8)
Substr(start,length), Ex: s2.substr(1,4)
toLowerCase()Ex: s2.toLowerCase()
toUpperCase()Ex: s2.toUpperCase()

Jeevan Nagendra 54
The Date Object

• Access to Date functions


Methods:
var d= new Date()
getDate(); Ex: d.getDate();
getDay(); getSeconds();
getFullYear(); getTime();
getHours(); getMonth();
getMilliseconds();getMinutes();

Jeevan Nagendra 55
Predefined Objects

• JavaScript also includes some


objects that are automatically
created for you (always available).
– document
– navigator
– window

Jeevan Nagendra 56
The document object

Methods:
• document.write() like a print
statement – the output goes into the HTML
document.

document.write("My title is" +


document.title+ “URL is”
+document.URL); string concatenation!

Jeevan Nagendra 57
JavaScript Example
<HEAD>
<TITLE>JavaScript is Javalicious</TITLE>
</HEAD>
<BODY>
<H3>I am a web page and here is my
name:</H3>
<SCRIPT>
document.write(document.title);
</SCRIPT>
<HR>

Jeevan Nagendra 58
The navigator Object
• Represents the browser. Read-only!
• Attributes include:

appName
appVersion
platform

Jeevan Nagendra 59
navigator Example

• alert(navigator.appName);
• alert(navigator.appVersion);
• alert(navigator.platform);

Jeevan Nagendra 60
The window Object
• Represents the current window.

• There are possible many objects of type


Window, the predefined object window
represents the current window.
• Access to, and control of, a number of
properties including position and size.

Jeevan Nagendra 61
some window methods

alert()
close()
prompt()
moveTo() moveBy()
open()
scroll() scrollTo()
resizeBy() resizeTo()

Jeevan Nagendra 62
Arrays

Jeevan Nagendra 63
Array literals
• JavaScript has array literals, written with brackets and
commas
– Example: color = ["red", "yellow", "green", "blue"];
– Arrays are zero-based: color[0] is "red"
• If you put two commas in a row, the array has an “empty”
element in that location
– Example: color = ["red", , , "green", "blue"];
– color has 5 elements
– However, a single comma at the end is ignored
– Example: color = ["red", , , "green", "blue”,]; still
has 5 elements

Jeevan Nagendra 64
Four ways to create an array
• You can use an array literal:
var colors = ["red", "green", "blue"];
• You can use new Array() to create an empty array:
– var colors = new Array();
– You can add elements to the array later:
colors[0] = "red"; colors[2] = "blue";
colors[1]="green";
• You can use new Array(n) with a single numeric
argument to create an array of that size
– var colors = new Array(3);
• You can use new Array(…) with two or more
arguments to create an array containing those
values:
– var colors = new Array("red","green", "blue");
Jeevan Nagendra 65
The length of an array
• If myArray is an array, its length is given
by myArray.length
• Array length can be changed by
assignment beyond the current length
– Example: var myArray = new Array(5);
myArray[10] = 3;

Jeevan Nagendra 66
Array functions
• If myArray is an array,
– myArray.sort() sorts the array alphabetically
– myArray.sort(function(a, b) { return a - b; }) sorts
numerically
– myArray.reverse() reverses the array elements
– myArray.push(…) adds any number of new
elements to the end of the array, and increases
the array’s length
– myArray.pop() removes and returns the last
element of the array, and decrements the array’s
length
– myArray.toString() returns a string containing the
values of the array elements, separated by
commas
Jeevan Nagendra 67
Array example code
• <script language="javascript">
• var a = [8,7,6,5];

• b = a.reverse();
• document.writeln(b);
• </script>

Jeevan Nagendra 68
The with statement
• with (object) statement ; uses the object as the
default prefix for variables in the statement
• For example, the following are equivalent:
– with (document.myForm) {
result.value = compute(myInput.value) ;
}

– document.myForm.result.value =
compute(document.myForm.myInput.value);

Jeevan Nagendra 69
for .. in statement
• You can loop through all the properties of an object
with for (variable in object) statement;
<html> <body>
<script type = "text/javascript">
var aProperty;
document.write("Window Object Properties<br /> ");
for (aProperty in window) {
document.write(aProperty);
document.write("<br />");
}
document.write ("Exiting from the loop!");
</script>
<p>Set the variable to different object and then try...</p>
</body> </html>

Jeevan Nagendra 70
Form Validation
<html> if( document.myForm.Zip.value == "" ||
<head> isNaN( document.myForm.Zip.value ) ||
<title>Form Validation</title> document.myForm.Zip.value.length != 6 )
<script type="text/javascript"> {
function validate() alert( "Please provide a zip in the format
{ ######." );
document.myForm.Zip.focus() ;
if( document.myForm.Name.value == "" ) return false;
{ }
alert( "Please provide your name!" ); if( document.myForm.Country.value == "-1" )
document.myForm.Name.focus() ; {
return false; alert( "Please provide your country!" );
} return false;
var emailID = document.myForm.EMail.value; }
atpos = emailID.indexOf("@"); return( true );
dotpos = emailID.lastIndexOf("."); }
if (atpos < 1 || ( dotpos - atpos < 2 ))
{ </script>
alert("Please enter correct email ID") </head>
document.myForm.EMail.focus() ;
return false;
}
Jeevan Nagendra 71
Form Validation
<body> <tr>
<form action="/cgi-bin/test.cgi" <td align="right">Country</td>
name="myForm" <td>
onsubmit="return(validate());"> <select name="Country">
<table cellspacing="2" cellpadding="2" <option value="-1" selected>[choose
border="1"> yours]</option>
<tr> <option value="1">USA</option>
<td align="right">Name</td> <option value="2">UK</option>
<td><input type="text" name="Name" <option value="3">INDIA</option>
/></td> </select>
</tr> </td>
<tr> </tr>
<td align="right">EMail</td> <tr>
<td><input type="text" name="EMail" <td align="right"></td>
/></td>
<td><input type="submit" value="Submit"
</tr> /></td>
<tr> </tr>
<td align="right">Zip Code</td> </table>
<td><input type="text" name="Zip" /></td> </form>
</tr> </body>
</html>

Jeevan Nagendra 72
Form Validation

Jeevan Nagendra 73
End of Unit 2

You might also like