Scribd
Upload
139 views

Topic 4 CSS

Cookies are small pieces of data stored in files on a user's computer. They are used to remember information about the user, like usernames. There are two types - session cookies, which are deleted when the browser closes, and persistent cookies, which have an expiration date. JavaScript can create, read, and delete cookies using the document.cookie property. Cookies are stored as name-value pairs separated by an equals sign. The value can be read by splitting the document.cookie string on the equals sign. Cookies can be deleted by setting the expiration date in the past. The expiration date can also be used to set how long a cookie remains on the user's computer.

Uploaded by

Pratiksha Jadhav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
139 views

Topic 4 CSS

Cookies are small pieces of data stored in files on a user's computer. They are used to remember information about the user, like usernames. There are two types - session cookies, which are deleted when the browser closes, and persistent cookies, which have an expiration date. JavaScript can create, read, and delete cookies using the document.cookie property. Cookies are stored as name-value pairs separated by an equals sign. The value can be read by splitting the document.cookie string on the equals sign. Cookies can be deleted by setting the expiration date in the past. The expiration date can also be used to set how long a cookie remains on the user's computer.

Uploaded by

Pratiksha Jadhav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

4.

1 Cookies

4.1.1 Basics of Cookies


 Cookies is a small piece of data stored in a file on your computer.
 The information present in the cookies is accessed by the web browser.
 Cookies remembers the information about the user in the following ways –
Step 1 : When the user visits the web page his/her name can be stored in a cookie.
Step 2 : Next time when the user visits the page, the cookie remembers his/her name.
 Cookies are saved in name-value pair. For example –
Username = AAA BBB
 Cookie is a small text file which contains following data :
o A name-value pair containing the actual data
o An expiry date after which it is no longer valid
o The domain and path of the server it should be sent to
 There are two types of cookies : Session cookies and persistent cookies
 Session Cookies : Session cookies is a cookie that remains in temporary memory only while user is reading
and navigating the web site. The cookie is automatically deleted when the user exits the browser
application.
 Persistent Cookies : A persistent cookie is a cookie that is assigned an expiration date. A persistent
cookie is written to the computer’s hard disk and remains there until the expiration date has been
reached; then it is deleted.
 JavaScript can create, read or delete a cookie using document.cookie property.

4.1.2 Creating Cookies


Creations of cookies is a simple technique. For creating a cookie we need to assign cookie value to
window.document.cookie. For instance

Thus the name value pair separated by = sign and terminated by a delimiter like semicolon(;), the cookie can be
assigned to document.cookie. Instead of window.document.cookie we can simply write document.cookie
TM
Technical Publications (4 - 1)
- An up thrust for knowledge
Client Side Scripting Language 4-2 Cookies and Browser
Data
Ex. 4.1.1 Write a JavaScript for creating a cookie for the user name.
Sol. :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function CreateCookie()
{
with(document.form1)
{
document.cookie="UserName"+username.value+";" alert("Cookie is created");
}
}
</script>
<head>
<body>
<form name="form1">
Enter Name: <input type="text" name="username"/>
<input type="button" value="Create Cookie" onclick="CreateCookie()"/>
</form>
</body>
</html>
Output

Script Explanation : In above JavaScript,


1) We have placed a one text element and one button element on the form. In the textfield user can enter
the value for the cookie and then click the button ‘Create Cookie’
2) On clicking the button, the function CreateCookie() is called
TM
Client Side Scripting Language 4-3 Cookies and Browser
Data
3) Inside the function CreateCookie(), for the form1, the cookie is set using the statement
document.cookie="UserName"+ username.value +";"
In above statement, the username.value is the value entered by the user. This value is assigned to the
document.cookie.
That’s it. The cookie is created!!. This message is flashed on the browser by using the alert box.

4.1.3 Reading a Cookie Value


 It is a common practice to create a cookie and then read the value of the cookie created.
 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.
 Using the split() function the string of cookies is break into key and values.
 The split() method finds the = character in the cookie, and then takes all the characters to the left of
the = and store them into array array [0].
 Next the split() method takes all the characters from the right of the = up to ; but not including the
semicolon, and assign those characters to array array [1].
Thus we can obtain the name value pair in array[0] and array[1] respectively.
Following example illustrates how to read the cookies value.
Ex. 4.1.2 : Write a Javascript to read the cookies the user has already set.
Sol. :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ReadCookie()
{
with(document.form1)
{
value = document.cookie.split('=')[1];
document.write ("<br/>Value : " + value);
}
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Read Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>

TM
Client Side Scripting Language 4-4 Cookies and Browser
Data
Output

4.1.4 Deleting Cookies


Cookies get deleted automatically when the browser session ends or its expiration date is reached.
Hence by setting previous expiry date we can delete the cookie.
Following JavaScript illustrate the process of deleting cookies.
Ex. 4.1.3 : Write a JavaScript to delete the cookie.
Sol. :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function DeleteCookie()
{
expiryDate=new Date()
expiryDate.setMonth(expiryDate.getMonth()-1) // Earlier date of expiry is set
with(document.form1)
{
document.cookie="UserName"+username.value+";"
document.cookie="expires="+expiryDate.toUTCString ()+";"
alert("Cookie Deleted");
}
}
</script>
</head>
<body>
<form name="form1">
Enter name: <input type="text"
name="username"/>
TM
Client Side Scripting Language 4-5 Cookies and Browser
Data
<input type="button" value="Delete Cookie"
onclick="DeleteCookie()"/>
</form>
</body>
</html>
Output

Script Explanation : In above JavaScript,


1) To delete a cookie we are simply setting the expiry date of the cookie to a time in the past.
2) We take a Date variable expiryDate. The getMonth() returns the system provided month. We just set
this month to past month by subtracting one from current month.
3) The new expiry date is assigned to the cookie.
4) Then the cookie is written by setting a new expiry date. This is how the cookie gets deleted.

4.1.5 Setting Expiration Date of Cookie


 We can set the expiration date of cookie by extending the life of a cookie beyond the current browser
session. Then, we need to save this extended expiry date within the cookie. This can be done by setting
the ‘expires’ attribute to a date and time.
 For that matter we need three important built in functions –
1) getMonth() : This method returns the current month based on the system clock of the computer running
the JavaScript.
2) setMonth() : This method assigns the month to Date variable
3) toGMTString() : This method returns the value of the Date variable to a string that is in the format of
Greenwich Mean Time, which is then assigned to the cookie.

TM
Client Side Scripting Language 4-6 Cookies and Browser
Data
Ex. 4.1.4 : Write a JavaScript to set the new expiry date of cookies.
Sol. :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function SetExpDtCookie()
{
expiryDate=new Date
expiryDate.setMonth(expiryDate.getMonth()+1)
with(document.form1)
{
document.cookie="UserName"+username.value+";"
document.cookie="expires="+expiryDate.toUTCString ()+";"
alert("New expiry Date is set for the Cookie");
}

}
</script>
</head>
<body>
<form name="form1">
Enter name: <input type="text"
name="username"/>
<input type="button" value="Set New Expiry Date" onclick="SetExpDtCookie()"/>
</form>
</body>
</html>
Output

TM
Client Side Scripting Language 4-7 Cookies and Browser
Data
4.2 Browser
 It is possible to open a new browser window from a currently running JavaScript. One can determine
the size, location of this window, toolbar, scroll bar or any other style that normally the browser
windows have.
 Once the new browser window is set up, it is also possible to change the contents within that window
dynamically.

4.2.1 Opening a Window


 It is possible to open a new window from a JavaScript by simply clicking a button.
 For that purpose the window object is used. This window object has various useful properties and
methods.
 To open a new window we use open() method of window object.

Syntax
The syntax of using open() method is
window.open(URL, name, syle)
where
URL : The URL specifies the URL of the web page that will appear in new window. This is an optional
parameter.
name : The name that could be assigned to a window. This is an optional parameter
style : The style of the window includes various parameters such as toolbar, scrollbar, location,height and width
of window and so on. This is an optional parameter. Various styles that can be possible are enlisted in the
following table

Style Purpose

fullscreen=yes|no|1|0 To display the browser in full-screen mode.

height=pixels The height of the window. Min. value is 100

left=pixels The left position of the window. Negative values not allowed

location=yes|no|1|0 To display the address field. Opera only

menubar=yes|no|1|0 To display the menu bar

resizable=yes|no|1|0 To determine if the window is resizable.

scrollbars=yes|no|1|0 To display scroll bars.

status=yes|no|1|0 To add a status bar

titlebar=yes|no|1|0 To display the title bar.

toolbar=yes|no|1|0 To display the browser toolbar.

top=pixels To determine the top position of the window. Negative values not allowed

width=pixels The width of the window. Min. value is 100

TM
Client Side Scripting Language 4-8 Cookies and Browser
Data
Return Value
A newly created window gets opened up on success and null on failure

Layout and Parts of Window

Ex. 4.2.1 : Write a JavaScript to open a new window.


Sol. :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function OpenWindowFunction()
{
var mywin=window.open("","","width=100,height=100")

}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Open Window" onclick="OpenWindowFunction()"/>
</form>
</body>
</html>

TM
Client Side Scripting Language 4-9 Cookies and Browser
Data
Output

4.2.2 Giving the New Window Focus


A focus to a new window can be given using focus() method. Following JavaScript illustrates the use of
focus() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function OpenWindowFunction()
{

var mywin=window.open("","MyWindow",
"status=0,toolbar=0,location=0, menubar=0,directories=0,
resizable=0,width=200,height=200")
this.focus()
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Open Window" onclick="OpenWindowFunction()"/>
</form>
</body>
</html>
Client Side Scripting Language 4 - 10 Cookies and Browser
Data
Output

4.2.3 Window Position


We can set the desired position for the window. Using the left and top attribute values the window
position can be set.

JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function OpenWindowFunction()
{
Var mywin=window.open ("","MyWindow","left=0, top=0,width=200,height=200")
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Open Window" onclick="OpenWindowFunction()"/>
</form>
</body>
</html>
Client Side Scripting Language 4 - 11 Cookies and Browser
Data
Output

Script Explanation : In above JavaScript, as we set the style attributes as left=0, right=0 in open() method,
the window is created and positioned at the extreme left and top location of screen.

4.2.4 Changing the Contents of Window


By writing some text to the newly created window we can change the contents of a window. For example
– In the following JavaScript we have written some text using write method

JavaScript Document
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function OpenWindowFunction()
{
var mywin=window.open("","MyWindow","width=200,height=200")
mywin.document.write("<p> This line is written in current window</p>");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Open Window" onclick="OpenWindowFunction()"/>
Client Side Scripting Language 4 - 12 Cookies and Browser
Data
</form>
</body>
</html>
Output

4.2.5

Closing a Window
The most simple operation about the window is to close it. It can be closed using the function close().
For example -

CloseWinDemo.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mywin;
function OpenWindowFunction()
{

mywin=window.open("","MyWindow","left=500, top=400,width=200,height=200")
}
function CloseWindowFunction()
{
mywin.close();
}
</script>
</head>
Client Side Scripting Language 4 - 13 Cookies and Browser
Data
<body>
<form name="form1">
<input type="button" value="Open Window" onclick="OpenWindowFunction()"/>
<input type="button" value="Close Window" onclick="CloseWindowFunction()"/>
</form>
</body>
</html>
Output

Script Explanation : In above Java script,


(1) We have created two buttons – one for opening the window and another is for closing the window. On
clicking the Open Window button the function OpenWindowFunction() is called and on clicking the
Close Window button the function CloseWindowFunction() is called. Inside this function close() method
is called to close the window.

4.2.6 Scrolling a Web Page


We can scroll horizontally or vertically using ScrollTo() function. Foe example –
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ScrollFunction()
{
window.scrollTo(300,0)
}
</script>
</head>
<body>
<form name="form1">
Client Side Scripting Language 4 - 14 Cookies and Browser
Data
<input type="button" value="Scroll" onclick="ScrollFunction()"/>
</form>
</body>
</html>

4.2.7 Multiple Windows at a Glance


It is possible to open up multiple windows at a time. It is simple to open multiple windows. Simply put
Open() method in a loop
For example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function OpenWindowFunction()
{
for(i=0;i<5;i++)
{
var mywin=window.open("","MyWindow"+i,"width=100,height=100")
}
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Open Window" onclick="OpenWindowFunction()"/>
</form>
</body>
</html>
Output
Client Side Scripting Language 4 - 15 Cookies and Browser
Data
4.2.8 Creating a Web Page in New Window
 We can create a web page using the window object with the help of write method.
 The only thing is that inside the write() we have to write the contents of the web page with the help of
html elements such as <head>, <body>, <title>,<h1> and so on.

JavaScript Document
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function CreateFunction()
{
var mywin=window.open("","MyWindow","width=300,height=300")
mywin.document.write("<html>");
mywin.document.write("<head>");
mywin.document.write("<title>WEB SITE DEMO</title>");
mywin.document.write("</head>");
mywin.document.write("<body>");
mywin.document.write("<h2>This is a new Web Page</h2>");
mywin.document.write("<h3>Welcome User!!!</h3>");
mywin.document.write("</body>");
mywin.document.write("</html>");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Create Web Page" onclick="CreateFunction()"/>
</form>
</body>
</html>
Output
Client Side Scripting Language 4 - 16 Cookies and Browser
Data

4.2.9 JavaScript in URLs


The Javascript code can be included in client side. JavaScript can be specified in URL using the pseudo-
protocol specifier.
This special protocol type specifies that the body of the URL is arbitrary JavaScript code to be interpreted
by the JavaScript interpreter.
For example we can type following code in URL bar
Javascript:alert(0)
This will show a pop up window of alert box.
If the JavaScript code in a javascript : URL contains multiple statements then these statements must be
separated by semicolons.
For example –
javascript:var t = new Date(); " The time is: " + t;
But for the security reasons modern web browsers are not allowing to execute “javascript:” code in URL.

4.2.10 JavaScript Security


 Javascript has several security issues that need widespread attention.
 One of the most common JavaScript security vulnerabilities is Cross-Site Scripting (XSS). Cross-Site
Scripting vulnerabilities enable attackers to manipulate websites to return malicious scripts to visitors.
These malicious scripts then execute on the client side in a manner determined by the attacker. This
vulnerability may cause the user data theft, account tampering and so on.
 JavaScript vulnerabilities can be both client-side problems and server-side as well as hackers are able
to steal server-side data and infect the users with malware. Therefore, server-side JavaScript injection
is also a much more dangerous problem in an application.
Client Side Scripting Language 4 - 17 Cookies and Browser
Data
 Cross-Site Request Forgery (CSRF) attack is another issue in Javascript Cross-Site Request Forgery
involves taking over or impersonating a user’s browser session by hijacking the session cookie. CSRF
attacks can trick users into executing malicious actions the attacker wants, or into taking
unauthorized actions on the website.

4.2.11 Timers
Using window object it is possible to execute the code at specified time intervals.
Two functions are supported by window object for handling timing events and those are –
1. setTimeout 2. setInterval
Let’s discuss them
(1) setTimeout
This method executes function after waiting for a specified number of milliseconds.

Syntax

Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function MyFunction()
{
alert("Welcome User!!!");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Click Me" onclick="setTimeout(MyFunction,4000);"/>
</form>
</body>
</html>
Client Side Scripting Language 4 - 18 Cookies and Browser
Data
Output

(2) SetInterval
This function executes the specific function at every give time interval

Syntax

Example
<!DOCTYPE html>
<html>
<body>
<p id="ID"></p>
<script type="text/javascript">
var t=setInterval(MyFunction,2000);
function MyFunction()
{
document.getElementById("ID").innerHTML+="<p>Welcome User!!!</p>";
}
</script>
</body>
</html>
Client Side Scripting Language 4 - 19 Cookies and Browser
Data
Output
Note that the welcome message will be displayed repeatedly on the browser window after some specific time interval.

4.2.12 Browser Location and History

(1) Location
The window.location object is useful for finding out the current location or path of the web page.
Various properties used by window.location are described in the following table

Sr. No. Property Purpose

1. window.location.hostname It returns the name of the host on which the web page is running.

2. window.location.pathname It returns the path name at which the web page is located. It includes
folder and file name.

3. window.location.protocol It returns the web protocol used such as HTTP, File, HTTPS.

4. window.location.assign It loads the new document

Ex. 4.2.2 : Write a JavaScript to display the pathname of the web page using window.location object.
Sol. :
<!DOCTYPE html>
<html>
<body>
<p id="ID"></p>
<script type="text/javascript">
document.getElementById("ID").innerHTML = "This web page is at path: " + window.location.pathname;
</script>
</body>
</html>
Client Side Scripting Language 4 - 20 Cookies and Browser
Data
Output

Ex. 4.2.3 : Write a JavaScript to display the protocol of the web page using window.location object.
Sol. :
<!DOCTYPE html>
<html>
<body>
<p id="ID"></p>
<script type="text/javascript">
document.getElementById("ID").innerHTML = "This web page is using the protocol: " + window.location.protocol;
</script>
</body>
</html>
Output
Client Side Scripting Language 4 - 21 Cookies and Browser
Data
(2) History
The window.history object is used for displaying browser history.
There are two important methods of window.browser
(1) window.history.back() : This method loads the previous URL in the history list. It is like clicking Back
button on Browser window.
(2) window.history.forward() : This method loads the next URL in the history list. It is like clicking
Forward button on Browser window.

JavaScript Example
<html>
<head>
<script type="text/javascript">
function MoveBack()
{
window.histoy.back();
}
function MoveForward()
{
window.histoy.forward();
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Back" onclick="MoveBack()"/>
<input type="button" value="Forward" onclick="MoveForward()"/>
</form>
</body>
</html>

You might also like