EXPERIMENT – 4

Aim: Variables, Operators, Conditions, Loops, Functions, Events, Classes and Objects,
Error handling, Validations, Arrays, String, Date.

Theory: JavaScript is the most widely used client-side programming language that lets you
supercharge your HTML with interactivity, animation and dynamic visual effect for better
User Interface and User Experience (UI/UX). JavaScript works together with HTML/CSS.
HTML provides the contents; CSS specifies the presentation; and JavaScript programs the
behavior.
Variables: A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript : local variable and global variable. A JavaScript local variable is
declared inside block or function. It is accessible within the function or block only. 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. 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.

Operators: JavaScript operators are symbols that are used to perform operations on
operands. There are following types of operators in JavaScript.

 Arithmetic Operators
 Comparison (Relational) Operators
 Bitwise Operators
 Logical Operators
 Assignment Operators
 Special Operators

Conditions: 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.
1. 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
}

2. 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
}
3. 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){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}

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
The JavaScript for loop iterates the elements for the fixed number of times. It should be used
if number of iteration is known.
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 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 JavaScript for in loop is used to iterate the properties of an object.
Functions: A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses (). Function names can contain letters, digits, underscores, and dollar
signs (same rules as variables). The parentheses may include parameter names separated by
commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
The code inside the function will execute when "something" invokes (calls) the function:
 When an event occurs (when a user clicks a button)
 When it is invoked (called) from JavaScript code
 Automatically (self invoked)

Events: HTML events are "things" that happen to HTML elements. When JavaScript is used
in HTML pages, JavaScript can "react" on these events. An HTML event can be something
the browser does, or something a user does. Here are some examples of HTML events:
 An HTML web page has finished loading
 An HTML input field was changed
 An HTML button was clicked
Often, when events happen, you may want to do something. JavaScript lets you execute code
when events are detected. HTML allows event handler attributes, with JavaScript code, to be
added to HTML elements.

Classes: Classes are a template for creating objects. They encapsulate data with code to work
on that data. Classes in JS are built on prototypes but also have some syntax and semantics
that are unique to classes. Classes are in fact "special functions", and just as you can define
function expressions and function declarations, a class can be defined in two ways: a class
expression or a class declaration.

Objects: In JavaScript, almost "everything" is an object.

 Booleans can be objects (if defined with the new keyword)
 Numbers can be objects (if defined with the new keyword)
 Strings can be objects (if defined with the new keyword)
 Dates are always objects
 Maths are always objects
 Regular expressions are always objects
 Arrays are always objects
 Functions are always objects
 Objects are always objects
Creating a JavaScript Object:
With JavaScript, you can define and create your own objects.
There are different ways to create new objects:
 Create a single object, using an object literal.
 Create a single object, with the keyword new.
 Define an object constructor, and then create objects of the constructed type.
 Create an object using Object.create().
Objects are mutable: They are addressed by reference, not by value.

Error Handling: When executing JavaScript code, different errors can occur.
 Error Handling: The try statement defines a code block to run (to try).
 The catch statement defines a code block to handle any error.
 The finally statement defines a code block to run regardless of the result.
 The throw statement defines a custom error.
The try statement allows you to define a block of code to be tested for errors while it is being
executed. The catch statement allows you to define a block of code to be executed, if an error
occurs in the try block.

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Shopping Website</title>
</head>
<style>

body, h1, h2, p {

margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
}

header {
background-color: rgb(215, 98, 137);
color: white;
padding: 10px 0;
text-align: center;
}
.search-box{
width: 80%;
height: 40px;
padding: 10px;
text-transform: capitalize;
border-style: 10px;
border-bottom-left-radius: 10px;
border: 1px solid #d1d1d1;
outline: none;
}
.search-btn{
width: 20%;
height: 40px;
padding: 10px 20px;
border: none;
outline: none;
cursor: pointer;
font-size: 15px;
text-transform: capitalize;

}
.search-box::placeholder{
color: #a9a9a9;

nav ul {
list-style: none;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav a {
color: white;
text-decoration: none;
}

main {
padding: 20px;
}

.product {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
text-align: center;
}
.product img {
max-width: 100%;
}

footer {
background-color: rgb(215, 98, 137);
color: white;
text-align: center;
padding: 10px 0;
}

</style>
<body>

<header>
<h1>CLOTHEIFY</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Cart</a></li>
<li><a href="#">Login</a></li>

<input type="text" class="search-box" placeholder="serach brand,product">

<button class="search-btn">Search</button>

</ul>
</nav>
</header>

<main>
<section class="products">
<div class="product">
<img src="photos/dress.jpg" alt="Product 1">
<h2>Twelfth Century Satin Dress</h2>
<p>Price: ₹17,999</p>
<button class="add-to-cart">Add to Cart</button>
</div>

</section>
</main>

<footer>
<p>&copy; 2023 CLOTHEIFY</p>
</footer>
<script>

const addToCartButtons = document.querySelectorAll('.add-to-cart');

addToCartButtons.forEach(button => {
button.addEventListener('click', () => {
alert('Item added to cart!');

});
});

</script>
</body>
</html>

OUTPUT:

Conclusion: The JavaScript has been implemented in the above code.