10.

Local storage

Local Storage is a web storage feature introduced in HTML5 that

allows web applications to store data persistently in a web browser.
It provides a simple key-value store and is designed to be a more
secure and ef cient alternative to cookies for storing data on the
client side. The data stored in Local Storage persists even when the
browser is closed and reopened, making it suitable for long-term
storage.

• Simple Key-Value Store: Local Storage stores data as

key-value pairs. You can store data using a key and retrieve it
later using the same key.
• Capacity: Local Storage has a larger storage capacity
compared to cookies. While the exact storage limit can vary
between browsers, it's typically around 5 MB per domain.
• Data Type: Data in Local Storage is stored as strings. If
you want to store more complex data types (such as arrays or
objects), you need to convert them to strings using methods
like JSON.stringify() before storing and JSON.parse() when
retrieving.
• No Expiration: The data stored in Local Storage does
not have an expiration time, unlike cookies which can have an
expiry date.
• Security: Local Storage is considered more secure than
cookies because it is not sent with every HTTP request,
reducing the risk of data interception. However, it's important
to note that, like cookies, data stored in Local Storage is
accessible by JavaScript on the same domain.

Local Storage is a valuable tool for creating more responsive and

user-friendly web applications by allowing them to remember user
preferences, settings, and other data on the client side.

11. Web Workers

Web Workers are a feature in HTML5 that allow you to run scripts in
the background, separate from the main execution thread of a web
fi
 page. They enable multitasking and parallel processing in web
applications, improving overall performance and responsiveness.

Here are some key points about Web Workers:

• Background Processing: Web Workers run scripts in

the background, independently of the main thread. This helps
prevent the main thread from being blocked by time-
consuming operations, enhancing the user experience.
• Multithreading: Web Workers provide a form of
multithreading for web applications. They allow you to perform
tasks concurrently, taking advantage of multi-core processors.
• Communication: Web Workers communicate with the
main thread using a messaging system. They can exchange
data by sending messages to each other. The data is
serialized and deserialized, ensuring that it can be safely
transferred between threads.
• No DOM Access: Web Workers do not have direct
access to the DOM (Document Object Model) or the window
object. This is because they run in a separate thread, and
direct DOM access could lead to synchronization issues.
However, they can communicate with the main thread through
messages.
Types of Web Workers:
• Dedicated Workers: These workers are dedicated to a single
script le. They have a one-to-one relationship with the script
that created them.
• Shared Workers: Shared Workers can be accessed by
multiple scripts running in different windows or tabs. They have
a shared state and can communicate with any script that has a
reference to them.

12. Of ine applications

Creating of ine web applications involves enabling the application

to work even when the user is not connected to the internet. This
can enhance the user experience by allowing them to access
content and perform tasks of ine. There are several techniques and
fi
fl
fl
fl
 technologies that enable the development of of ine web
applications. Here are some key concepts:

• Service Workers:
• Service Workers are a crucial part of building of ine-
capable web applications. They are JavaScript les that
run in the background, separate from the main browser
thread.
• Service Workers can intercept and handle network
requests, allowing developers to implement caching
strategies.
• They enable features like background synchronization,
push noti cations, and of ine support.
Caching Strategies:
• Caching is a key aspect of of ine web applications. By caching
resources, such as HTML, CSS, JavaScript, and images, you
can ensure that these assets are available even when the user
is of ine.
• Different caching strategies include:
• Cache First: Serve the resource from the cache, and if
it's not there, fetch it from the network.
• Network First: Attempt to fetch the resource from the
network, and if that fails, fall back to the cache.
• Network Only: Always fetch the resource from the
network and don't use the cache.
• Cache Only: Always use the cache and don't make a
network request.
Web Storage (localStorage, sessionStorage):
• Web Storage allows the storage of key/value pairs locally in
the user's browser.
• While localStorage persists even when the browser is closed
and reopened, sessionStorage is available only for the
duration of the page session

13. Geo-location

Geolocation is a feature in web browsers that allows web

applications to obtain the user's geographic location. This is
fl
fi
fl
fl
fl
fi
fl
achieved using the Geolocation API, which provides a simple way
for developers to access location information from the device's
hardware, such as GPS, Wi-Fi, or cellular networks.
Key components of the Geolocation API include:

• navigator.geolocation Object:
• The navigator.geolocation object is the main entry
point for the Geolocation API.
• It provides methods for obtaining the device's current
location and watching for changes in position.
• getCurrentPosition() Method:
• The getCurrentPosition() method is used to
asynchronously request the current location of the device.
• It takes two callback functions as parameters: one for
success (successCallback) and one for handling errors
(errorCallback).
• watchPosition() Method:
• The watchPosition() method is used to continuously
monitor the device's location.
• It also takes success and error callback functions, similar
to getCurrentPosition().
• The method returns a unique ID that can be used to later
stop watching the position using clearWatch().
• Position Object:
• The position information is represented by a Position
object, which contains details such as latitude, longitude,
altitude, accuracy, and timestamp.

14. Path

In HTML, the <path> element is commonly used within the <svg>

(Scalable Vector Graphics) element to de ne vector graphics. The
<path> element contains a series of commands and parameters that
describe the path of the shape. It's a powerful way to create various
shapes and lines. Here's a basic example:

<svg width="100" height="100">

fi
 <path d="M10 10 H90 V90 H10 Z" ll="blue" />
</svg>

In this example:

• M10 10: Move to the point (10, 10).

• H90: Draw a horizontal line to (90, 10).
• V90: Draw a vertical line to (90, 90).
• H10: Draw a horizontal line to (10, 90).
• Z: Close the path by drawing a straight line back to the starting
point.

15. Texts

In HTML, you can use the <text> element to display text content.
However, in most cases, the <text> element is not directly used for
this purpose. Instead, the common way to display text in HTML is
by using the <p>, <h1> through <h6>, <span>, or other text-related
elements.

16. Gradients and images

n JavaScript, you can work with gradients and images to create
interesting visual effects on a webpage. Below, I'll provide a brief
overview of how to create gradients and work with images using
HTML and JavaScript.

Gradients:
You can create gradients using the CSS linear-gradient and
radial-gradient properties. Here's a simple example using
JavaScript to apply a linear gradient to the background of an HTML
element:

<!D<!DOCTYPE html>
<html lang="en">
<head>

<style>
fi
 #gradientDiv {
width: 300px;
height: 200px;
}
</style>
<title>Gradient and Images in JavaScript</title>
</head>
<body>

<div id="gradientDiv"></div>

<script>
// JavaScript to apply linear gradient dynamically
var gradientDiv =
document.getElementById('gradientDiv');
gradientDiv.style.background = 'linear-gradient(to
right, #ff7e5f, #feb47b)';
</script>

</body>
</html>OCTYPE html>
<html lang="en">

Images

You can also manipulate images using JavaScript. Here's a simple

example of changing the source of an image dynamically:

<!DOCTYPE html>

<head>

<title>Gradient and Images in JavaScript</title>

</head>

<body>
<img id="myImage" src="initial-image.jpg" alt="Initial Image"
width="300" height="200">

<script>

// JavaScript to change image source dynamically

var myImage = document.getElementById('myImage');

myImage.src = 'new-image.jpg';

</script>

</body>

</html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
#gradientDiv {
width: 300px;
height: 200px;
}
</style>
<title>Gradient and Images in JavaScript</title>
</head>
<body>

<div id="gradientDiv"></div>

<script>
// JavaScript to apply linear gradient dynamically
var gradientDiv = document.getElementById('gradientDiv');
gradientDiv.style.background = 'linear-gradient(to right, #ff7e5f, #feb47b)';
</script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#gradientDiv {
width: 300px;
height: 200px;
}
</style>
<title>Gradient and Images in JavaScript</title>
</head>
<body>

<div id="gradientDiv"></div>

<script>
// JavaScript to apply linear gradient dynamically
var gradientDiv = document.getElementById('gradientDiv');
gradientDiv.style.background = 'linear-gradient(to right, #ff7e5f, #feb47b)';
</script>

</body>
</html>