Scribd
Upload
52 views

Chapter 4 Cookies & Browser Data

1. The document discusses cookies and browser data, describing how cookies store user information in web pages using small text files. 2. Cookies can be created and read using JavaScript, and come in two types: session cookies that expire when the browser closes, and persistent cookies that expire on a specified date. 3. The document provides details on creating, reading, modifying, and deleting cookies through JavaScript code examples.

Uploaded by

Priya Mali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
52 views

Chapter 4 Cookies & Browser Data

1. The document discusses cookies and browser data, describing how cookies store user information in web pages using small text files. 2. Cookies can be created and read using JavaScript, and come in two types: session cookies that expire when the browser closes, and persistent cookies that expire on a specified date. 3. The document provides details on creating, reading, modifying, and deleting cookies through JavaScript code examples.

Uploaded by

Priya Mali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

CHAPTER 4

Cookies And Browser Data


COOKIES

➢Cookies help you store user information in web pages.


➢Cookies are data stored in small text files in your system.
➢When a web server sends a web page to a browser, the connection shuts
down, and the server forgets everything about the user.
➢Cookies were invented to solve the problem of remembering the information
about the user. For example:
When a user visits a web page, his/her name can be stored in a cookie.
Next time the user visits the page, the cookie remembers the user name.
➢A JavaScript can be used to create cookies whenever someone visits the web
page that contains the script.
➢A JavaScript can also be used to read cookies stored on a user’s computer.
➢you’ll learn how to create cookies and read cookies from within your web
page by using a JavaScript.
➢Cookie contains the information as a string.
➢ The text of a cookie must contain a name-value pair, which is a name and
value of the information.
➢Example:
name=‘Alinka’
Cookies consist of 5 variable-length fields:
1. Expires − This shows the date the cookie will expire. If this is blank, the
cookie will expire when the visitor quits the browser.
2. Domain − The domain field provides the domain name of your site.
3. Path − It is the path to the directory or web page that set the cookie. This
can be left blank if you want to retrieve the cookie from any directory or
page.
4. Secure − If this field contains the word “secure”, then the cookie may only
be retrieved with a secure server. If this field is blank, there are no such
restrictions.
5. Name=Value − This depicts the cookies that are set and retrieved in the
form of key-value pairs.
TYPES OF COOKIES

1. Session cookies: A session cookie resides in memory for the length of


the browser session. A browser session begins when the user starts the
browser and ends when the user exits the browser. Even if the user surfs
to another web site, the cookie remains in memory. However, the cookie
is automatically deleted when the user exits the browser application.
2. Persistent cookie : A persistent cookie that is assigned an expiration. A
persistent cookie is written to the computer’s hard disk and remains
there until the expiration date has been reached; then it’s deleted.
➢You can extend the life of a cookie by setting an expiration date,
which becomes part of the cookie when the cookie is written to
the user’s hard disk.
➢Note that information contained in a cookie identifies the
computer that was used to visit your web site, not the person who
used the computer to visit your site.
➢You cannot store much information in a cookie, as they’re
restricted to 4 kilobytes of information
CREATING A COOKIE

• The simplest way to create a cookie is to assign a string value to the document.cookie
object, which looks like this.
document.cookie = "key1 = value1;expires = date";
• Here the expires attribute is optional. If you provide this attribute with a valid date or
time, then the cookie will expire on a given date or time and thereafter, the cookies' value
will not be accessible.
• document.cookie = "CustomerName=alinka;"
JAVASCRIPT FOR STORING/WRITING COOKIE
<html>
<head>
<title>Write Cookie</title>
<script language="Javascript" type="text/javascript">
function WriteCookie()
{
with (document.form1)
{
document.cookie =“UserName="+ uname.value+";"+“
expires=Thu, 18 Dec 2020 12:00:00 UTC";
alert("Cookie Written")
}
}
</script>
</head>
<body>
<form name=“form1" action="" >
Enter your name:
<input type="text" name=“uname" />
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
READING COOKIES
• Reading a cookie is just as simple as writing one, because the value of the
document.cookie object is the cookie.
• So you can use this string whenever you want to access the cookie.
• The document.cookie string will keep a list of name=value pairs separated by
semicolons, where name is the name of a cookie and value is its string value .
• You can use strings' split() function to break a string into key and values as follows:-
<html>
<head>
<title>Read Cookie</title>
<script language="Javascript" type="text/javascript">
function ReadCookie()
{
with (document.form2)
{
if (document.cookie == "")
{
text1.value = "No cookies"
}
else
{
text1.value = document.cookie.split('=')[1]
}
}
}
</script>
</head>
<body>
<form name=“form2" action="" >
Cookie: <input type="text" name=“text1" />
<BR>
<INPUT name="Reset“ value="Get Cookie" type="button“ onclick="ReadCookie()"/>
</FORM>
</body>
</html>
SETTING THE EXPIRATION DATE
• You can extend the life of a cookie by setting an expiration date and saving the
expiration date within the cookie.
• The expiration date is typically an increment of the current date.
• For example, you might say that the cookie expires three months from the day the
cookie was created.

var expireDate = new Date ()


expireDate.setMonth(expireDate.getMonth()+3)
expireDate.toUTCString
DELETING A COOKIE

• Cookies are automatically deleted when either the browser session ends or its
expiration date has been reached.
• However, you can remove a cookie at any time by setting its expiration date to a date
previous to the current date.
• This forces the browser to delete the cookie
• The most efficient way to reset the expiration date is to use the getDate() method of the
Date variable, then subtract 1 from the date returned by this method, and then assign
the difference to the Date variable
function DeleteCookie()
{
expireDate= new Date() expireDate.setDate(expireDate.getDate()-1)
with (document.form1)
{
var CustomerName = customer.value
document.cookie = "CustomerName1="+ CustomerName+";
expires="+expireDate.toUTCString()
alert("Cookie Deleted")
}
}
BROWSER WINDOWS
➢ Open the Window
➢ Giving the New Window Focus
➢ Placing the Window into Position on the Screen
➢ Changing the Contents of a Window
➢ Closing the Window
➢ Scrolling a Web Page
➢ Opening Multiple Windows at Once
➢ Creating a Web Page in a New Window
➢ JavaScript in URLs
➢ JavaScript security
➢ Timers
➢ Browser location and history.
INTRODUCTION
• In this chapter, you’ll learn how to manipulate the browser window itself using a
JavaScript.
• You can use JavaScript
open a new browser window while your JavaScript is running
determine the size of the window
determine whether or not the window has a toolbar or scroll bar
set up other styles.
you can use JavaScript to change the content of each of them dynamically.
OPEN THE WINDOW
➢ The browser window is an object.
➢ Whenever you want to do something with the browser window, you must reference a
window and then reference the property or method of the window that you want to access.
➢ For example, here’s how to open an empty browser window that uses the default settings:

MyWindow = window.open()
➢ The open() method returns a reference to the new window, which is assigned to the
MyWindow variable.
➢ A window has many properties, such as its width, height, content, and name.
➢ You set these attributes when you create the window by passing them as parameters to the
open() method:

1. The first parameter is the full or relative URL of the web page that will appear in the new
window.
2. The second parameter is the name that you assign to the window.
3. The third parameter is a string that contains the style of the window.
Following table shows a list of styles that you can set.
Window Styles
Settings for parameters:
➢Position:
✓ left/top (numeric) – coordinates of the window top-left corner on the screen. There is a
limitation: a new window cannot be positioned offscreen.
✓ width/height (numeric) – width and height of a new window. There is a limit on minimal
width/height, so it’s impossible to create an invisible window.
➢ Window features:
✓ menubar (yes/no) – shows or hides the browser menu on the new window.
✓ toolbar (yes/no) – shows or hides the browser navigation bar (back, forward, reload etc) on
the new window.
✓ location (yes/no) – shows or hides the URL field in the new window.
✓ status (yes/no) – shows or hides the status bar. Again, most browsers force it to show.
✓ resizable (yes/no) – allows to disable the resize for the new window. Not recommended.
✓ scrollbars (yes/no) – allows to disable the scrollbars for the new window. Not recommended.
EXAMPLE
➢ Let’s say that you want to open a new window that has a height and a width of 300 pixels
and displays an advertisement that is an image. All other styles are turned off.

➢MyWindow = window.open(‘C:/CSS/nature.jpg’, 'myAdWin’,


'status=0, toolbar=0, location=0,
menubar=0, directories=0,
resizable=0, height=300,
width=300')
<html>
<head>
<title>Open New Window</title>
<script language="Javascript" type="text/javascript">
function OpenNewWindow()
{
MyWindow = window.open('C:/CSS/nature.jpg','myAdWin', 'status=0, toolbar=0,
location=0,menubar=0, directories=0, resizable=0,height=300, width=300’);
}
</script>
</head>
<body>
<form action="" method="">
<input name="OpenWindow" value="Open Window" type="button" onclick="OpenNewWindow()"/>
</form>
</body>
</html>
GIVING THE NEW WINDOW FOCUS
• You give a new window focus by calling the focus() method of the new
window after the new window opens.
• This method is used to give focus to the specified window. This is useful for
bringing windows to the top of any others on the screen.
•

window.focus( )
<html>
<head>
<title>Giving new window focus</title>
<script language="Javascript" type="text/javascript">
function OpenNewWindow() {
MyWindow = window.open('C:/CSS/nature.jpg','','height=300, width=300');
MyWindow1 = window.open('C:/CSS/nature1.jpeg','', 'height=400, width=400');
MyWindow1.focus();
}
</script>
</head>
<body>
<form action="" method="">
<p>
<input name="OpenWindow" value="Open Window" type="button"
onclick="OpenNewWindow()"/>
</p>
</form>
</body>
</html>
PLACING THE WINDOW INTO POSITION
ON THE SCREEN
• The browser determines the location on the screen where a new window will be displayed.
• you can specify the location by setting the left and top properties of the new window when
you create it.
• The left and top properties create the x and y coordinates, in pixels, of the upper-left
corner of the new window.

• The following example shows how to position a new window in the upper-left corner of the
screen by setting the left property to 0 and the top property to 0 .
<html>
<head>
<title>Position New Window</title>
<script language="Javascript" type="text/javascript">
function OpenNewWindow() {
MyWindow = window.open('C:/CSS/nature.jpg','myAdWin', 'height=300, width=300,left=100,top=100');
}
</script>
</head>
<body>
<form action="" method="">
<p>
<input name="OpenWindow" value="Open Window" type="button" onclick="OpenNewWindow()"/>
</p>
</form>
</body>
</html>
CHANGING THE CONTENTS OF A WINDOW
➢ If we want to change the content of an open window each time and display
something different in the window.
<body>
<html >
<form action="" method="">
<head>
<p>
<title>Changing Content of Window</title>
<input name="JS" value="JS Book"
<script language="Javascript" type="text/javascript">
type="button"
function OpenNewWindow(Ad) {
onclick="OpenNewWindow('C:/CSS/js.png')"/>
MyWindow = window.open(Ad, 'myAdWin',
<input name=" JS1" value="JS Book1"
'status=0,toolbar=0, location=0, menubar=0,
type="button"
directories=0,resizable=0, height=250, width=250')
onclick="OpenNewWindow('C:/CSS/js1.jpg')"/>
}
</p>
</script>
</form>
</head>
</body>
</html>
CLOSING THE WINDOW

• The close() method closes the current window.


• This method is often used together with the open() method.
• Syntax

window.close()
•
<!DOCTYPE html>
<html>
<body>
<button onclick="openWin()">Open </button>
<button onclick="closeWin()">Close </button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("http://gpsolapur.ac.in/", "myWindow",
"width=500,height=500,left=200,top=200");

}
function closeWin() {
myWindow.close();
}
</script>
</body>
</html>
SCROLLING A WEB PAGE
• JavaScript is used to scroll the web page automatically by calling the scrollTo() method of the
window.
• The scrollTo() method requires two parameters, which are the x and y coordinates of the top-
left corner of the viewable area of the web page that you want to display.

• Syntax

window.scrollTo(x, y)

X : The coordinate to scroll to, along the x-axis (horizontal), in pixels

Y: coordinate to scroll to, along the y-axis (vertical), in pixels


<html>
<head>
<style>
body {
width: 5000px;
height: 5000px;
}
</style>
</head>
<body>
<p>Click the button to scroll the document window 300 pixels horizontally and 500 pixels
vertically.</p>
<button onclick="scrollWin()">Click me to scroll</button>
<br>
<br>
<h1>Government Polytechnic Solapur</h1>
<script>
function scrollWin() {
window.scrollTo(300, 500);
}
</script>
</body>
</html>
OPENING MULTIPLE WINDOWS AT ONCE
• example shows you how to open multiple windows onscreen

<html>
<head>
<title>Open Multiple Windows</title>
<script language="Javascript" type="text/javascript">
function Launch() {
for (i=0; i < 5;i++)
{
Win = window.open('','win'+i,'width=100,height=100')
}
}
</script>
</head>
<body>
<form action=" " method="">
<p>
<input name="Windows1" value="Multiple Window" type="button" onclick="Launch()"/>
</p>
</form>
</body>
</html>
CREATING A WEB PAGE IN A NEW WINDOW
• You can place dynamic content into a new window by using the document .write() method to
write HTML tags to the new window.
<html>
<head>
<title>Changing Content of Window</title>
<script language="Javascript" type="text/javascript">
function Window() {
MyWindow = window.open('', 'myWin', 'height=250, width=250')
MyWindow.document.write('<html>')
MyWindow.document.write('<head>')
MyWindow.document.write('<title> Writing Content<\/title>')
MyWindow.document.write('<\/head>')
MyWindow.document.write('<body style="background-color:pink">')
MyWindow.document.write('<form action="" method="">')
MyWindow.document.write('<P>')
MyWindow.document.write('Frist Name:<input name="FirstName" type="text" \/>')
MyWindow.document.write('<BR>')
MyWindow.document.write('<INPUT name="submit" type="submit" \/>')
MyWindow.document.write('<\/p>')
MyWindow.document.write('<\/form>')
MyWindow.document.write('<\/body>')
MyWindow.document.write('<\/html>')
MyWindow.focus()
}
</script>
</head>
<body>
<form action="" method="">
<p>
<input name="OpenWindow" value="Open Window" type="button" onclick="Window()"/>
</p>
</form>
</body>
</html>
JAVASCRIPT TIMING EVENTS
➢ The window object allows execution of code at specified time intervals.
➢ These time intervals are called timing events.
The two key methods to use with JavaScript are:
•setTimeout(function, milliseconds)
This Function is commonly used if you wish to have your function called once after the
specified delay( number of milliseconds.)

•setInterval(function, milliseconds)
This function is commonly used to set a delay for functions that are executed again and again,
such as animations
setTimeout() Example
<html>
<body>
<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>
<button onclick="setTimeout(myFunction, 3000);">Try it</button>
<script>
function myFunction() {
alert('Hello setTimeoutDemo');
}
</script>
</body>
</html>
setInterval() Example
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
</body>
</html>

You might also like