COURSE CODE : 22IT101

COURSE TITLE : APPLICATION DEVELOPMENT PRACTICES

MODULE 03 22IT101-ADP

Introduction to Cascading Style Sheets - What CSS can do, CSS

Syntax, Types of CSS. Working with Text and Fonts- Text Formatting,
Text Effects, Fonts. CSS Selectors - Type Selector, Universal Selector,
ID Selector, Class selector. Colors and Borders – Background,
Multiple Background, Colors RGB and RGBA, HSL and HSLA, Borders,
Rounded Corners, Applying Shadows in border, Implementing CSS3
in the "Real World" – Modernizr, HTML5 Shims, SASS, and Other CSS
Preprocessors,CSS Grid Systems, CSS Frameworks.

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS – Introduction
CSS is acronym of Cascading Style Sheets. It helps to define the
presentation of HTML elements as a separate file known as CSS
file having .css extension.
What is CSS?
• CSS stands for Cascading Style Sheets, used to describe the
presentation and design of a web pages.
• Using CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns are
sized and laid out, what background images or colors are
used.
• CSS can control the layout of multiple web pages all at once.

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS Styling Example
Following is layout of a webpage, click the button below to add
CSS styling to the page and see difference between a webpage
with and without CSS.

css
MODULE 03 22IT101-ADP

Why Use CSS?

• CSS Saves Time: You can write CSS once and then reuse same sheet in
multiple HTML pages.
• Pages Load Faster: If you are using CSS, you do not need to write HTML
tag or attributes every time. Just write one CSS rule of a tag and apply it to
all the occurrences of that tag.
• 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 get a far better look to your HTML page.
• Multiple Device Compatibility: For the same HTML document, different
versions of a website can be presented for different screen widths
• Global Web Standards: Now most of the HTML attributes are being
deprecated and it is being recommended to use CSS.

css
MODULE 03 22IT101-ADP

CSS Syntax

Syntax of CSS consist of selectors and declaration used to apply

styles to HTML elements.

selector { property: value; }

The selector targets the HTML element/elements that you want

to style.
The declaration block contains one or more declarations enclosed
in curly braces {}.
Each declaration consists of a property and a value separated by
a colon :. Declarations are separated by semicolons ;.

css
MODULE 03 22IT101-ADP

Types of CSS

There is no types in CSS, it actually refer - "In how many ways we can use CSS?"
So there are three ways to use CSS on HTML document.

Inline CSS: Inline CSS are directly applied on the HTML elements and it is the
most prioritize CSS among these three. This will override any external or
internal CSS.

Internal CSS: Internal CSS are defined in the HTML head section inside
of <style> tag to let the browser know where to look for the CSS.

External CSS: External CSS are defined in a separate file that contains only CSS
properties, this is the recommended way to use CSS when you are working on
projects. It is easy to maintain and multiple CSS files can be created and you
can use them by importing it into your HTML document using HTML <link> tag.

css
MODULE 03 22IT101-ADP

Working with Text and Fonts- Text Formatting, Text Effects, Fonts.
CSS Styling Text involves modifying appearance of text content by setting proper
color, alignment, letter-spacing and indention to make it more visually appealing.

How to Style Text in CSS?

Following are common ways to style texts in CSS.
Change Color: The default color of text in a webpage will be black. You can change
this according to your webpage theme, using color property in CSS.
Set Alignment: You can use text-align property in css to specify alignment (center,
left, right) of text inside a container.
Text Decoration: The text-decoration property in CSS can be used to add effects like
underline, overline, or strike-through to texts.
Shadow Effect: If you want to create a shadow around text in your webpage you can
use text-shadow property in CSS. This can create a 3D effect or a subtle glow around
the text.
Change Font Style: The font-style property allows you to style the text as normal,
italic, or oblique.

css
MODULE 03 22IT101-ADP

Working with Text and Fonts- Text Formatting, Text Effects, Fonts.
CSS Styling Text involves modifying appearance of text content by setting proper
color, alignment, letter-spacing and indention to make it more visually appealing.

How to Style Text in CSS?

Following are common ways to style texts in CSS.
Change Color: The default color of text in a webpage will be black. You can change
this according to your webpage theme, using color property in CSS.
Set Alignment: You can use text-align property in css to specify alignment (center,
left, right) of text inside a container.
Text Decoration: The text-decoration property in CSS can be used to add effects like
underline, overline, or strike-through to texts.
Shadow Effect: If you want to create a shadow around text in your webpage you can
use text-shadow property in CSS. This can create a 3D effect or a subtle glow around
the text.
Change Font Style: The font-style property allows you to style the text as normal,
italic, or oblique.

css
MODULE 03 22IT101-ADP

Working with Text and Fonts- Text Formatting, Text Effects, Fonts.
CSS Text Color Property

<!DOCTYPE html>
<html>
<body>
<p style = "color: blueviolet;"> Color Name: blueviolet; </p>
<p style = "color:#ff00ff;"> Hexadecimal value: #ff00ff; </p>
<p style = "color: rgb(255,124,100);"> RGB value: rgb(255, 124,
100); </p>
</body>
</html>

css
MODULE 03 22IT101-ADP

CSS Text Alignment Property

The text in a webpage can be aligned horizontal and vertically inside a container.
The text-align property specifies horizontal alignment of text in container. (left, right,
center, justify)
The vertical-align property is used to align the text vertically at top, bottom, baseline,
middle.
<!DOCTYPE html>
<html>
<head>
<style> th{ vertical-align: bottom; border: 2px solid; width: 200px; height:
150px; } </style>
</head>
<body> <h2>Text Alignment</h2>
<p style="text-align: left;">Text Left Alignment.</p>
<p style="text-align: right;">Text Right Alignment.</p>
<p style="text-align: center;">Text Center Alignment.</p>
<table> <th>This is vertical alignment</th> </table>
</body>
</html>
css
MODULE 03 22IT101-ADP

CSS Fonts allows to customize font style of webpages using various font related
properties. In this tutorial we will understand the font styling in CSS.

What is CSS Font?

In CSS font property is used to style and adjust type of text used in webpage.
You can define fonts and customize their appearance by setting properties
like font-family, font-size, font-weight and font-style. You can also use
shorthand property font to manipulate all the font style.

Types of Font Families

Monospace Fonts: The font in which every letter have equal width.
Serif Fonts: Have small stroke at the edge of each letter.
San-Serif Fonts: Clean fonts with out any strokes.
Fantasy Fonts: Decorative fancy fonts.
Cursive Fonts: The font that resembles human handwriting.

Syntax
selector { font-family: family-name, generic-family; }
css
MODULE 03 22IT101-ADP

<html> <head>
<style> p { font-family: Lucida Handwriting, Cursive; } </style>
<style> .font-size-example { font-size: 20px; }
.font-weight-example { font-weight: bold; }
.font-style-example { font-style: italic; } </style> </head>
<body>
<p > This is a font that written in Lucida Handwriting. THis is a font that
looks like human handwriting. </p>
<p class="font-size-example"> This is an example of text with an adjusted
font size. </p>
<p class="font-weight-example"> This is an example of text with an adjusted
font weight. </p>
<p class="font-style-example"> This is an example of text with an adjusted
font style. </p>
</body> </html>

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS Selectors - Type Selector, Universal Selector, ID Selector, Class selector.

CSS Selectors are used to select the HTML elements you want to style on a web
page. They allow you to target specific elements or groups of elements to apply
styles like colors, fonts, margins, and more.
The element or elements that are selected by the selector are referred to as subject
of the selector.

Types of Selectors
• Universal Selectors
• Element Selectors
• Class Selectors
• Id Selectors
• Attribute Selectors
• Group Selectors
• Pseudo-element Selectors
• Pseudo-class Selectors
• Descendant Selectors
• Child Selectors
• Adjacent Sibling Selectors
• General Sibling Selectors
css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS Selectors - Type Selector, Universal Selector, ID Selector, Class selector.

CSS Universal Selector
Universal selector, denoted by an asterisk mark (*), is a special selector that
matches all elements in an HTML document. These are generally used to
add a same length margin and padding to all the elements in document.

Syntax
* { margin: 0; padding: 0; }

As per the above syntax, the universal selector is used to apply a margin
and padding of 0 to all HTML elements.

Example
Following example demonstrates the use of a universal selector (*):

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS Selectors - Type Selector, Universal Selector, ID Selector, Class selector.

<html>
<head>
<style> *
{ margin: 0; padding: 0; background-color: peachpuff; color:
darkgreen; font-size: 25px; }
</style>
</head>
<body> <h1>Universal selector (*)</h1>
<div> Parent element
<p>Child paragraph 1</p>
<p>Child paragraph 2</p> </div>
<p>Paragraph 3</p>
</body>
</html>

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS Selectors - Type Selector, Universal Selector, ID Selector, Class selector.

CSS ID Selector

An ID selector targets single element with a particular value for id

attribute to style it. An id in CSS is denoted by "#" (hash) symbol.
Same class can be applied to multiple elements, but an id is unique for an
element.

Syntax
#style-p { color: green; font-size: 25px; }
#style-h1 { text-decoration-line: underline; color: red; }

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS Selectors - Type Selector, Universal Selector, ID Selector, Class selector.

Example
Following example demonstrates the use of an id selector, where #style-div,
#tutorial and #stylePoint are the id selectors applied on the elements:
<html>
<head>
<style> #style-div { border: 5px inset gold; width: 300px; text-align: center; }
#tutorial{ color: green; font-size: 20px; }
#stylePoint{ color: black; font-size: 15px; font-weight: bold; }
</style>
</head>
<body> <div id="style-div">
<div id="tutorial"> Tutorials <span id="stylePoint"> Point </span> </div>
<p> Here we used ids to style different elements. </p> </div>
</body>
</html>

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS Selectors - Type Selector, Universal Selector, ID Selector, Class selector.

CSS Class Selector
A class selector targets an element with a specific value for its class
attribute to style it. A class in CSS is denoted by "." (period) symbol.

Syntax
.sideDiv { text-decoration-line: underline; }
.topDiv { color: green; font-size: 25px; }

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

CSS Selectors - Type Selector, Universal Selector, ID Selector, Class selector.

Example
Following example demonstrates the use of a class selector,
where .style-div, .topDivs and .bottomDivs are class selectors:
<html>
<head>
<style>
.style-div { border: 5px inset gold; width: 300px; text-align: center; }
.topDivs{ font-weight: bold; font-size: 30px; }
.bottomDivs{ color: green; font-size: 20px; } </style>
</head>
<body> <div class="style-div">
<div class="topDivs"> Hello World </div>
<div class="topDivs"> Learn CSS </div> <div class="bottomDivs"> From
</div>
<div class="bottomDivs"> TutorialsPoint </div> </div>
</body>
</html>
css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

Colors and Borders

The background property of CSS is used to set the background of an
element. It can be used to apply a single background image or multiple
background images, as well as defining the background color, size, position,
repeat behavior, and other related properties.
It is a versatile tool for styling the appearance of elements and adding visual
interest to web pages.

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

Colors and Borders

The background is a shorthand for the following properties:
background-attachment: Specifies the position of the background relative
to the viewport, either fixed or scrollable.
background-clip: Controls how far a background image extends beyond the
element's padding or content box.
background-color: Sets the background color of an element.
background-image: Sets one or more background image(s) on an element.
background-origin: Sets the origin of the background.
background-position: Sets the initial position of each image in a
background.
background-repeat: Controls the repetition of an image in the background.
background-size: Controls the size of the background image.

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

Colors and Borders

Overview
The background property allows to set one or multiple layers of background,
separated by commas.
Each layer in the background may have zero or atleast one occurrence of the
following values:
<attachment>
<bg-image>
<position>
<bg-size>
<repeat-style>
If <bg-size>is to be added, it must be included immediately after <position>,
separated with '/'. For example: "left/50%".
Value of <box> can be included zero, one or two times. Based on the number of
occurrences, following values are set:
once - sets the values for both background-origin and background-clip.
twice - first sets the value of background-origin and second sets the value
of background-clip.
The value of background-color may be included in the last layer specified as
background.
css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

Colors and Borders

Possible Values
Following are the possible values that the background shorthand property can have:
<attachment>: Specifies the position of the background, whether fixed or scrollable.
Default is scroll.
<box>: Default is border-box and padding-box respectively.
<background-color>: Sets the color of the background. Default is transparent.
<bg-image>: Sets the one or more background image. Default is none.
<position>: Sets the initial position of the background. Default is 0% 0%.
<repeat-style>: Controls the repetition of the image in background. Default
is repeat.
<bg-size>: Controls the size of the background image. Default is auto.

Syntax

background = background-color | bg-image | bg-position / bg-size |

repeat-style | attachment | box;

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

Colors and Borders- Multiple Background

In CSS, you can use multiple background images for an element. First
background should be layered on top, and the last background should be
layered behind. Only the last background can have a background color.

Syntax
.multibackgrounds { background: background1, background2, /* …, */
backgroundN; }

You can use shorthand and individual background properties,

excluding background-color.
The following background properties can be provided as a list, one for each
background: background, background-attachment, background-clip, backgro
und-image, background-origin, background-position, background-repeat, ba
ckground-size.

css
MODULE 03 22IT101-ADP

Module 3: Cascading Style Sheets

Colors and Borders- Multiple Background

<html>
<head>
<style> .multibackgrounds { background-image: url(images/logo.png),
url(images/see.jpg); background-position: left top, right top;
background-repeat: no-repeat, repeat; padding: 70px; } </style>
</head>
<body> <div class="multibackgrounds"> <p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen
book.</p> </div>
</body>
</html>

css
MODULE 03 22IT101-ADP

Colors and Borders- Multiple Background

css
MODULE 03 22IT101-ADP

Colors and Borders- Multiple Background

<button class="btn success">Success</button>

<button class="btn info">Info</button>

<button class="btn warning">Warning</button>

<button class="btn danger">Danger</button>

<button class="btn default">Default</button>

css
MODULE 03 22IT101-ADP

.btn {
border: none; /* Remove borders */
color: white; /* Add a text color */
padding: 14px 28px; /* Add some padding */
cursor: pointer; /* Add a pointer cursor on mouse-over */
}

.success {background-color: #04AA6D;} /* Green */

.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */

.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */

.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */

.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Gray */

.default:hover {background: #ddd;}

css
MODULE 03 22IT101-ADP

Colors and Borders- CSS - Colors

CSS Colors can be specified using predefined name of colors, RGB, RGBA, HSL, HSLA
and Hexadecimal values. CSS allow us to change background color, text color, border
color and caret color of any elements in HTML documents.
Colors are very important aspects of web design, as they not only enhance the visual
appeal but also influence user behavior.

css
MODULE 03 22IT101-ADP

Colors and Borders- CSS - Colors

Types of Values for CSS Colors
Following are all the value we can set to color properties in css.
Color name: CSS has a set of predefined color names that you can use directly. For
example, red, blue, green, grey, lightblue, aquamarine. There are lot more.
background-color: grey;
Hexadecimal code: It starts with a hash (#) followed by six hexadecimal digits that
represent RGB value of color.
background-color: #FF0000; /* Red Color */
Short Hexadecimal code: Shorter version of hexadecimal format where each of the
RGB components is represented by a single digit, and the value is duplicated.
background-color: #F00; /* Red Color */

css
MODULE 03 22IT101-ADP

Colors and Borders- CSS - Colors

TRGB Function: The rgb() function defines color by taking three parameters, red,
green, and blue values. Parameter values can vary from 0 to 255.
background-color: rgb(0, 0, 255); /* Blue Color */
RGBA Function: The rgb() function defines color by taking four parameters, red,
green, blue and alpha values. ALpha value describes intensity of color with a decimal
value between 0 and 1.
/* Half Intense Blue Color */ background-color: rgba(0, 0, 255, 0.5);
HSL Function: The hsl() function accepts three parameters for colors, Hue (0 to 360
degree), Saturation (%), and Lightness (%)
/* Green Color */ background-color: hsl(120, 100%, 50%);
HSLA Function: The hsla() function accepts four parameters for colors, Hue (0 to 360
degree), Saturation (%), Lightness (%) and alpha( 0 to 1 decimal number)
/* Half Intense Green Color */ background-color: hsla(120, 100%, 50%, 0.5);

css
MODULE 03 22IT101-ADP

Colors and Borders- Borders, Rounded Corners, Applying Shadows in border

A border, in the context of design and styling, refers to a decorative or functional
element that surrounds the content of an object, such as a text box, image, or any
other HTML element on a web page.
The border property is used to create a border around an element, such as a div,
image, or text. It allows you to customize the appearance of the border, including its
color, width, and style.
Borders play a vital role in the overall aesthetics and design of the webpage.
Importance of borders
The importance of using borders in CSS can be summarized as follows:
Visual separation: Borders help to visually separate different elements on a
webpage, making it easier for users to understand the layout and navigation.
Organization and structure: Borders can be given to grids, tables or even boxes that
makes the content look more organized and structured.
Emphasis and focus: Borders can be given to elements to emphasize and highlight
them.
Design and aesthetics: Borders allow to add you to add decoration to the elements
to enhance the visual appeal. This can be achieved using the style, color and width of
border.

css
MODULE 03 22IT101-ADP

Colors and Borders- Borders, Rounded Corners, Applying Shadows in border

Types of Border Properties
In CSS, we can style following border properties.
border-style: Specifies whether a border should be solid, dashed line, double line, or
one of the other possible values
border-width: Specifies the width of a border
border-color: Specifies the color of a border

Border Style Property

The border-style property is used to specify type of border style for an element. You
can specify border style as solid, dashed or dotted. Check out the output of following
example for all the type of border styles.

css
MODULE 03 22IT101-ADP

Colors and Borders- Borders, Rounded Corners, Applying Shadows in border

<html>
<head> </head>
<body>
<h1>Border Style Property</h1>
<p style="border-style: none;"> No border. </p>
<p style="border-style: hidden;"> Hidden border. </p>
<p style="border-style: dotted;"> Dotted border. </p>
<p style="border-style: dashed;"> Dashed border. </p>
<p style="border-style: solid;"> Solid border. </p>
<p style="border-style: double;"> Double border. </p>
<p style="border-style: groove;"> Groove border. </p>
<p style="border-style: ridge;"> Ridge border. </p>
<p style="border-style: inset;"> Inset border. </p>
<p style="border-style: outset;"> Outset border. </p>
</body>
<html>

css
MODULE 03 22IT101-ADP

Colors and Borders- Borders, Rounded Corners, Applying Shadows in border

CSS rounded corners are created using the border-radius property. This property
allows you to specify the radius of the corners of an element's outer border edge.
Possible Values
<length>: Size of circle radius is denoted, using length values. Negative values are not
valid.
<percentage>: Size of circle radius is denoted, using percentage values.
Horizontal axis percentage is referred to the width of the box.
Vertical axis percentage is referred to the height of the box.
Negative values are not valid.

css
MODULE 03 22IT101-ADP

Colors and Borders- Borders, Rounded Corners, Applying Shadows in border

<html>
<head>
<style>
.rounded-box { width: 200px; height: 100px; background-color: pink; line-height:
100px; border-radius: 20px; }
</style>
</head>
<body>
<div class="rounded-box"> This is a rounded corner box. </div>
</body>
</html>

css
MODULE 03 22IT101-ADP

Colors and Borders- Borders, Rounded Corners, Applying Shadows in border

CSS box-shadow Property
The CSS box-shadow property is used to apply one or more shadows to an element.
Specify a Horizontal and a Vertical Shadow
In its simplest use, you only specify a horizontal and a vertical shadow. The default
color of the shadow is the current text-color.

A <div> element with a box-shadow

Example
Specify a horizontal and a vertical shadow:
div {
box-shadow: 10px 10px;
}

css
MODULE 03 22IT101-ADP

Thank you

css
JAVASCRIPT
JAVASCRIPT
• JavaScript is the world's most popular programming language.
• JavaScript is the programming language of the Web.
• JavaScript is easy to learn.
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
• JavaScript Can Change HTML Attribute Values
DISPLAY DATA IN JAVASCRIPT
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().
Simple program in JavaScript
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
document.write('Hello World');
</script>
</body>
</html>
Simple program in JavaScript
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
alert('Hello World');
</script>
</body>
</html>
VARIABLES IN JAVASCRIPT
In JavaScript, variables are used to store data values that can be
referenced and manipulated. There are three ways to declare variables
in JavaScript:
• var - The traditional way of declaring variables. It has function scope
or global scope.
• let - A more modern way to declare variables. It has block scope.
• const - Used to declare variables that cannot be reassigned (constant
values). It also has block scope.
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Variables Example</title>
</head>
<body>
<h1>Understanding JavaScript Variables</h1>
<script>
EXAMPLE
// Using 'var' to declare a variable
var name = "John"; // var is function-scoped
console.log(name); // Output: John
// Using 'let' to declare a variable
let age = 30; // let is block-scoped
console.log(age); // Output: 30
// Using 'const' to declare a variable
const country = "USA"; // const cannot be reassigned
console.log(country); // Output: USA
EXAMPLE
// Changing the value of 'let' variable
age = 35;
console.log(age); // Output: 35
// Uncommenting the next line will result in an error because you cannot reassign a 'const' variable
// country = "Canada"; // Error: Assignment to constant variable.
// 'var' allows redeclaration within the same scope
var name = "Alice"; // No error, redeclaring 'name'
console.log(name); // Output: Alice
// 'let' and 'const' do not allow redeclaration in the same scope
// let age = 25; // Error: Identifier 'age' has already been declared
// const country = "Canada"; // Error: Identifier 'country' has already been declared
</script>
</body>
</html>
Key Concepts
1. var:
• Declares a variable that is function-scoped or globally scoped if declared outside a
function.
• Can be re declared and reassigned.
• Less preferred in modern JavaScript due to its function-level scoping behavior.
2. let:
• Declares a variable with block scope, which means the variable is accessible only within
the block it is declared in (e.g., within a loop, condition, or function).
• Can be reassigned but not re declared in the same scope.
3. const:
• Declares a constant variable that cannot be reassigned after its initial assignment.
• Has block scope, just like let.
• You cannot re declare a const variable, and you cannot change its value after it’s set.
Key Concepts
• Use let when you need to reassign the variable later.
• Use const for variables that won't be reassigned, ensuring immutability.
• Avoid using var in modern JavaScript, unless necessary for backward
compatibility.
Sample Programs
// Get the current date
var today = new Date();
// Get the day of the month
var dd = today.getDate();
// Get the month (adding 1 because months are zero-based)
var mm = today.getMonth() + 1;
// Get the year
var yyyy = today.getFullYear();
OPERATORS
1. Arithmetic Operators
These operators are used to perform basic mathematical operations.
•Addition (+): Adds two values.
•Subtraction (-): Subtracts the second value from the first.
•Multiplication (*): Multiplies two values.
•Division (/): Divides the first value by the second.
•Modulus (%): Returns the remainder of a division.
•Exponentiation (**): Performs exponentiation (raises a number to a power).
•Increment (++): Increases a variable's value by 1.
•Decrement (--): Decreases a variable's value by 1
OPERATORS -EXAMPLE
let x = 10;
let y = 5;
console.log(x + y); // 15 (Addition)
console.log(x - y); // 5 (Subtraction)
console.log(x * y); // 50 (Multiplication)
console.log(x / y); // 2 (Division)
console.log(x % y); // 0 (Modulus)
console.log(x ** y); // 100000 (Exponentiation)
let z = 0;
console.log(z++); // 0 (Increment, post-increment)
console.log(z); // 1
Assignment Operators
These operators assign values to variables.
• Assignment (=): Assigns a value to a variable.
• Add and assign (+=): Adds the right operand to the left operand and
assigns the result.
• Subtract and assign (-=): Subtracts the right operand from the left
operand and assigns the result.
• Multiply and assign (*=): Multiplies the right operand by the left
operand and assigns the result.
• Divide and assign (/=): Divides the left operand by the right operand
and assigns the result.
Assignment Operators -EXAMPLE
let a = 5;
a += 3; // a = a + 3, so a becomes 8
console.log(a); // 8
a *= 2; // a = a * 2, so a becomes 16
console.log(a); // 16
a /= 4; // a = a / 4, so a becomes 4
console.log(a); // 4
Comparison Operators
• Equal to (==): Checks if two values are equal (without considering data type).
• Strict equal to (===): Checks if two values are equal and of the same type.
• Not equal to (!=): Checks if two values are not equal (without considering data
type).
• Strict not equal to (!==): Checks if two values are not equal and not of the same
type.
• Greater than (>): Checks if the left value is greater than the right.
• Less than (<): Checks if the left value is less than the right.
• Greater than or equal to (>=): Checks if the left value is greater than or equal to
the right.
• Less than or equal to (<=): Checks if the left value is less than or equal to the
right.
 Comparison Operators -EXAMPLE
let m = 10;
let n = 5;
console.log(m == n); // false (Equal to)
console.log(m === '10'); // false (Strict equal to)
console.log(m != n); // true (Not equal to)
console.log(m !== '10'); // true (Strict not equal to)
console.log(m > n); // true (Greater than)
console.log(m < n); // false (Less than)
console.log(m >= 10); // true (Greater than or equal to)
console.log(m <= 5); // false (Less than or equal to)
 Logical Operators
• Logical AND (&&): Returns true if both operands are true.
• Logical OR (||): Returns true if at least one operand is true.
• Logical NOT (!): Reverses the logical state of its operand.
EXAMPLE
let x = true;
let y = false;
console.log(x && y); // false (Logical AND)
console.log(x || y); // true (Logical OR)
console.log(!x); // false (Logical NOT)
 Ternary (Conditional) Operator
• The ternary operator is a shorthand for if...else statements.
• It takes three operands.Condition ? expression_if_true :
expression_if_false

let age = 18;

let result = (age >= 18) ? "Adult" : "Minor";
console.log(result); // Adult
Bitwise Operators
• AND (&): Performs bitwise AND on two operands.
• OR (|): Performs bitwise OR on two operands.
• XOR (^): Performs bitwise XOR on two operands.
• NOT (~): Inverts all the bits of a number.
• Left shift (<<): Shifts bits to the left, filling with zeros.
• Right shift (>>): Shifts bits to the right.
 Bitwise Operators
let a = 5; // 0101 in binary
let b = 3; // 0011 in binary
console.log(a & b); // 1 (0101 & 0011 = 0001)
console.log(a | b); // 7 (0101 | 0011 = 0111)
console.log(a ^ b); // 6 (0101 ^ 0011 = 0110)
console.log(~a); // -6 (invert all bits of 0101)
console.log(a << 1); // 10 (0101 << 1 = 1010)
console.log(a >> 1); // 2 (0101 >> 1 = 0010)
Spread Operator
• In Javascript, both the spread operator and rest parameter have the
same syntax which is three dots(…).
• Even though they have the same syntax they differ in functions.
• There can be more than one spread operator in javascript functions.

Syntax:
var var_name = [...iterable];
Spread Operator
• Example 1: In the example below two arrays are defined and they’re
merged into one using the spread operator (…). The merged array
contains elements in the order they’re merged.
<script>
var array1 = [10, 20, 30, 40, 50];
var array2 = [60, 70, 80, 90, 100];
var array3 = [...array1, ...array2];
console.log(array3);
</script>
Spread Operator
• Example 2: In this example, appending an element to a given iterable.
An array is defined and a value needs to be appended to it, so we use
the spread operator to spread all the values of the iterable and then
add the elements before or after according to the order we want.
<script>
var array1 = [10, 20, 30, 40, 50];
var array2 = [...array1, 60];
console.log(array2);
</script>
Spread Operator
Example 3: In this example, we will copy objects using the spread operator. obj2 is
given all the properties of obj1 using the spread operator(…). curly brackets must be
used to specify that object is being copied or else an error gets raised.
<script>
const obj = {
firstname: "Divit",
lastname: "Patidar",
};
const obj2 = { ...obj };
console.log(obj2);
</script>
Rest parameter
• Rest parameter: The rest parameter is converse to the spread
operator. while the spread operator expands elements of an iterable,
the rest parameter compresses them. It collects several elements. In
functions when we require to pass arguments but were not sure how
many we have to pass, the rest parameter makes it easier.
• Note: There must be only one rest parameter in javascript functions.
Syntax:
function function_name(...arguments) {
statements;
}
Rest parameter
• Example: In this example, the rest parameter condenses multiple
elements into a single element even when different numbers of
parameters are passed into the function, the function works as we
used the rest parameter. it takes multiple elements as arguments and
compresses them into a single element or iterable. further operations
are performed on the iterable.
Rest parameter
<script>
function average(...args) {
console.log(args);
var avg = args.reduce(function (a, b) {
return a + b;
}, 0) / args.length;
return avg;
}
console.log("average of numbers is : "
+ average(1, 2, 3, 4, 5));
console.log("average of numbers is : "
+ average(1, 2, 3));
</script>
Exercise
1. Write a JavaScript program to display the current day and time in
the following format.
Sample Output : Today is : Tuesday.
Current time is : 10 PM : 30 : 38
1. Write a JavaScript program to calculate multiplication and division
of two numbers (input from the user).
Sample form :
DESIGN AND DEVELOP A SIMPLE CALANDER
USING HTML,CSS AND JAVASCRIPT