Scribd
Upload
2 views

css notes 4 sagar mane final

The document provides an overview of cookies and browser data, detailing how to create, read, write, and delete cookies, as well as setting expiration dates. It also explains browser functionalities such as opening and closing windows, scrolling, timers, and managing browser history. Examples of JavaScript code are included to illustrate these concepts in practice.

Uploaded by

hj05102006
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

css notes 4 sagar mane final

The document provides an overview of cookies and browser data, detailing how to create, read, write, and delete cookies, as well as setting expiration dates. It also explains browser functionalities such as opening and closing windows, scrolling, timers, and managing browser history. Examples of JavaScript code are included to illustrate these concepts in practice.

Uploaded by

hj05102006
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

CSS UNIT 4 : COOKIE AND BROWSER DATA (8MARKS)

SYLLABUS :
4.1 basic of cookies, reading a cookie value, writing a cookie value, creating a
cookies, deleting a cookies, setting the expiration date ofcookie.

4.1.1 basic of cookies :


1. cookie is a small piece of data stored in a file on your computer .
2. the information stored in the cookie is accesed by the web browser
3. Cookies remembers the information about the user in following ways-
Step 1 : When the user visits the Web page his or her name can be stored in Cookie
Step 2 : Next time when the user visits the page the cookie remembers his or her name
Cookie works as follows :

1. storing information :
When user visits to website The basic information such as username andpassword can be
stored in the cookie.
2. Accessing information :
I) The stored username and password can be accessed by the web browserwhich is
remembered by the browser in the form of cookie.
II) So, when you come back to the website, the browser can quickly access thesaved details
to make things easier for you.
III) Cookies are saved in the form of name value pair as follows : Username =“student”;
3. Cookie contains following data :
1. A name-value pair
2. An expiry date for that cookie ((how long the cookie will last before it getsdeleted)
3. The website/Domain name that created the cookie

Types of cookie :
1. Session cookie :
I) Session cookies are temporary cookies that remember users online activitiesthroughout the
session.
II) I.e It remember the information when a user logged in until logout or when auser close the web
page. when user gets logged out the session cookies get expired.

2. Persistent cooking.
I) A persistent cookie lasts longer because it has an expiration date. It stays saved on your
computer even after you log out or close the browser, until itreaches that expiration date.
II) These cookies are stored in a folder in your browser’s installation files.
III) You can create, read, or delete these cookies using JavaScript through thedocument.cookie
command.
CREATING A COOKIE

To create a cookie we need to assign a value to cookie by


using document.cookie as follows :

document.cookie =
“key=value”;
You can also Add an expiry date to the cookie in UTC time format as
follows :
II) to create cookie you must have local server means you cannot store cookiewhen html file is open
Document.cookie = “Username = student; expires = Thu, 4 july 2019
11:30:00
with your file explorer folder you must open html file using live server extension.

WAP to create a cookie : form and using name attribute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>create cooike</title>
<script>
function create_cookie()
{
var cvalue =
document.getElementById("mytext").value;
document.cookie = "username="+cvalue;
alert("cookie is created");
document.write(document.cookie)
}
</script>
</head>
<body>
<input type="text" name="mytext" id="mytext">
<input type="button" value="btn" onclick="create_cookie()">
</body>

Output :
READING AND WRITING A COOKIE VALUE

 When cookie is created , it can be read by browser.


 The values of all the cookies are stored in the “document.cookie” object and it is in the string format.
 When we create a new cookie it is stored in the form of key = value pair
 The respective cookie values are separated by the semicolon (;) where name is the name of the
cookie and value is The Associated String Value
 In other words after adding a new (name = value) pair to the document.cookie the new pair will
be concatenated with already created string of document.cookie
 If you want to update the cookie value of existing cookie , we need to it again.

<html>
<head>
<title>reading and writing a cookie</title>
<script>
function write1()
{
var
cookieValue=document.getElementById("mytext").value
; document.cookie ="username="+cookieValue;
alert("write succesfully");
}
function readCookie()
{
var x;
if(document.cookie="
")
{
x="";
alert("please enter the username")
}
else
{
x = document.cookie;
alert("all stored cookie are 👉"+x);
}
}
</script>
</head>
<body>
<form action="" name="myform">
Enter the Username : <input type="text" name="mytext" id="mytext"
placeholder="enter the name">
<br><br>
<input type="button" value="write cookie" onclick="write1()">

<input type="button" value="read me" onclick="readCookie()">


</form>
</body>
</html>
Deleting cookie

 If the cookie is temporary cookie then it is automatically deleted when we close the browser.
 If you want to delete temporary cookie without closing the browser then we have to update the
expiry date of the cookie manually to the past date.
 Similarly if the cookie is persistent cooking then we have to update expiry date of the cookie to the
past date.
 In both cases the respective cookies are automatically deleted after expiry date and automatically
deleted by browser.

Note : below porgramm is of create read and delete cookie

<html>
<title>deleting cookie</title>
</head>
<body>
<script>
var cookieVal;
function createCookie() {
cookieVal =
document.getElementById("username").value;
document.cookie = "Username=" + cookieVal;
alert("cookie is created");
}
function readCookie() {
if (document.cookie = "") {
alert("cookie not found");
}
else {
alert(document.cookie);
}
}
function deletecookie() {
if (document.cookie = "") {
alert(" no cookie found to delete");
}
else {
document.cookie = "Username=" + cookieVal + "; expires=Thu, 24 Oct
2023
00:00:00
UTC"; alert("cookie is deleted");

}
}
</
script>
</
body>
<form action="" name="myform">
<input type="text" name="username" id="username">
<br>
<input type="button" value="create cookie" onclick="createCookie()"><br>
<input type="button" value="read cookie" onclick="readCookie()"><br>
<input type="button" value="delete cookie" onclick="deletecookie()">
</form>
</html>
Output :
Setting Expiry date of cookie

 We can extend the life of cookie by updating the expiry date of the cookie to the future date .
 This can be done by setting the value of expires property to the new date and time
 The new date object is obtained by using the “new date()” function.
 To access the value of the date following functions are close
A) getMonth() : returns month of current date object.
B) setMonth() : Set’s the month to current date object.
C) toUTCString() : this function formats the expiry date in the standard format.

Jsp to setting expiry date of cookie


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>changing expiry date of the cookie</title>
<script>
function changeDate()
{
var cookieValue =
document.getElementById("username").value; var today =
new Date();
today.setTime(today.getMonth()+1);
document.cookie =
"username="+cookieValue+";expires="+today.toUTCString(); alert("the
date of the cookie is changed and the given cookie is
👇👇\n"+document.cookie);
}
</script>
</head>
<body>
<form action="" name="entry">
enter the name : <input type="text" name="username" id="username"><br><br>
<input type="button" value="change expiry date" onclick="changeDate()">
</form>
Browser

1. A browser is an application program which Is used to locate,access, and display the content of
Internet and worldwide web which involves web page videos images and other files .
2. some of the example of browser are
- chrome ,edge,internet explorer,opera and Firefox etc.
3. we can perform various operation of browser
- opening a window
- giving new window focous
- positioning a window
- changing content
- closing a window
- scrolling a window
- opening multiple window

Opening a window

1. used to open new window from current window


2. it is invoked by the open object
3. syntax : -
window.open(URL,name,style)
 URL : the specifies the url of the webpage that will appear in new window. This is an
optional parameter.
 Name : used to set the name of the new window. This is optional
 Style : The style of the window includes various parameters such as toolbar, scrollbar ,location
height and width of the window and so on .this is optional parameter.

Close window
The close() function is used to close the new window which is created by open() function

Below is the program for both the code


Opening and Closing a window

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>closing a window</title>
<script>
var a;
function openWindow()
{
a = window.open("","himanshu","width=400
height=400"); a.document.write("himanshu");
}
function closeWindow()
{
a.close();
}
</script>
</head>
<body>
<button onclick="openWindow()">open</button><br><br>
<button onclick="closeWindow()"> closeWindow</button>
</body>
</html>

Output :
Focous () window (not sure)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>closing a window</title>
<script>
var a;
function openWindow()
{
a = window.open("","himanshu","width=400
height=400"); a.document.write("himanshu");
this.focus();
}
function closeWindow()
{
a.close();
}
</script>
</head>
<body>
<button onclick="openWindow()">open</button><br><br>
<button onclick="closeWindow()"> closeWindow</button>
</body>
</html>

Output :
Same as above

Jsp to open multiple window using loop

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opening Multiple Window</title>
<script>
var a;
function MultipleWindow() {
for (let i = 0; i <= 5; i++) {
window.open("", "", "left=400 top=400 width=400 height=400");
}
}
</script>
</
head>

<body>
<button onclick="MultipleWindow()">opening Multiple window</button>
</body>
</html>
Same as above o/p but multiple window operlap each other ok
Scrolling a webpage

1. We can scroll the current window both vertically and horizontally for these there are two functions.
a) scrollTo()
b) scrollBy()

i) scrollTo() :
- Moves the scrollbar to a specific position on the page.
- The scrollTo method scrolls the page (or an element) to a specific set of coordinates. It directly sets
the scroll position to a given X and Y coordinate on the page.
- Syntax
window.scrollTo(x, y);
x: The horizontal pixel value to scroll to. If zero then no horizontal scroll to.
y: The vertical pixel value to scroll to.
- Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollTo Example</title>
</head>
<body>
<button onclick="scrollToPosition()">Scroll to 500px Down</button>

<script>
function scrollToPosition() {
window.scrollTo(0, 100); // Scroll to 500px from the top of
the page
}
</script>

<div style="height: 1500px;"></div> <!-- Creates scrollable space -->

</body>
</html>
ii) scrollBy()
- Moves the page (or an element) by a certain amount from its current position.
- Instead of jumping to a specific spot, it scrolls a certain distance from where you are now.

- Example

<html>
<head>
<title>scrollBy Example</title>
</head>
<body>
<button onclick="scrollByPosition()">Scroll by 200px Down</button>
<script>
function scrollByPosition() {
window.scrollBy(0, 200); // Scroll down by 200px from the current
position
}
</script>

<div style="height: 1500px;"></div> <!-- Creates scrollable space -->

</body>
</html>

Timers in browser :

- Sometime there is a situation where we need to generate an event dynamically or to perform


specific tasks repeatedly without any user action
- Javascript provides two simple function to trigger an event
A) set timeout ()
B) set interval ()

A) setTimeout()
- This function allow to trigger particular event at specific time from the current time
- Syntax
setTimeout(functionname,timer);
- Functionname : it indiacates the method to be triggered
- Timer : it inidicates amount of time in millisecond for the browser to wait until triggering the function.

<html>
<head>
<title>Document</title>
<script>
function myfun() {
setTimeout(displayfun, 5000); // Wait for 5 seconds before displaying
the
alert
}
function displayfun() {
alert("I am Vinayak closing");
}
</script>
</head>
<body>
<input type="button" name="b1" value="Close" onclick="myfun()">
</body>
</html> note : programm displays alert box in every 5 sec

Alert box appear after 5 sec.

B) setInterval()
- This function allows the user to trigger the function repeatedly after specific time interval
- Syntax
setInterval(function name,timer);
parameter works same as setTimeout()

<html>
<head>
<title>Document</title>
<script>
function myfun() {
setInterval(displayfun, 5000); // Wait for 5 seconds before displaying
the
alert
}
function displayfun() {
alert("I am Vinayak closing");
}
</script>
</head>
<body>
<input type="button" name="b1" value="Close" onclick="myfun()">
</body>
</html> note : programm displays alert box in every 5 sec

History in browser

- The history object contain the record of all the url visited by the user within a browser window
- The history object is part of window object so it is accessed by window.history
 Property of history
- length : return the no of the urls in list of history

 methods of history :
- back() : used to load previous URL in the history list
- forward() : used to load next URL in the history list
- go() : used to load specific URL in history list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function next() {
window.history.forward
();
}

function previous() {
window.history.back();
}

function histlen() {
document.getElementById("myid").innerText = "Length of history
is " + history.length;
}
</script>
</head>
<body onload="histlen()">
<input type="button" value="NEXT" onclick="next()"><br>
<input type="button" value="BACK" onclick="previous()"><br>
<div id="myid"></div>
</body>
</html>
Output :

Browser location :

- The location object contains info about the current URL.


- Location object is a part of window object and it is accessed through “window.location”
- In other word window.location property used to find location and path of the current web page
- Following are the properties / attribute of window location
A) Window.location.pathname : this indicate the complete detail part of the current web page
B) Window.location.host name: this return the host domain name of the url.
C) Window.location.protocol: this returns the protocol of the url example http or https.
D) Window. location.assign: this is used to load the new document in the web page.
Wap to implement location object

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
location object
</title>
<script>
function display()
{
document.getElementById("para1").innerHTML="the
pathname of webpage="+window.location.pathname;
document.getElementById("para2").innerHTML="the host
of the webpage="+window.location.hostname;
document.getElementById("para3").innerHTML="the protocol
of the webpage="+window.location.protocol;

}
</script>
</head>
<body>
<button onclick="display()">get information of webpage</button><br>
<p>click here to get the inforamtion about the webpage</p><br>
<h1 id="para1"></h1><br>
<h1 id="para2"></h1><br>
<h1 id="para3"></h1>
</body>
</html>

You might also like